How to filter a multi dimensional json file to match the input value

I am triying filter a json file to match the input value. I write the code below. The json file is multi dimensional.

var object = [{"key1" : "Test value 1",
    "key3" : [{
    "key4" : "Test value 3",
    "key5" : "Test value 4"
    },
    {
    "key4" : "Test value 5",
    "key5" : "Test value 6"
    }]
    },
    {
    "key1" : "Test value 11",
    "key3" : [{
    "key4" : "Test value 13",
    "key5" : "Test value 14"
    },
    {
    "key4" : "Test value 15",
    "key5" : "Test value 16"
    }]
    }];

   const search = document.getElementById("search");
    const matchList = document.getElementById("match-list");
    
    searchStates = searchText => {
        
        const states = object;
        
        let matches = states.filter(state => {
            const regex = new RegExp(`^${searchText}`, 'gi');
            
            return state.key3.key4.match(regex);
        });
        console.log(matches);
    };
    
    search.addEventListener("input", () => searchStates(search.value));

<input type="text" id="search" class="form-control form-control-lg" placeholder="type here">
<div id="match-list"></div>

I need to match input with key 4 and need to remove duplicate values. How to do it? I tried with

states.key3.filter(…state.key4 but it give errors

Answer

This will show the object that has a key4 value exactly equal to the search input:

var object = [
  { key1: 'Test value 1', key3: [ 
    { key4: 'Test value 3', key5: 'Test value 4' },
    { key4: 'Test value 5', key5: 'Test value 6' }
  ]},

  { key1: 'Test value 11', key3: [ 
    { key4: 'Test value 13', key5: 'Test value 14' }, 
    { key4: 'Test value 15', key5: 'Test value 16' }
  ]},
]

const search = document.getElementById('search')
const matchList = document.getElementById('match-list')
searchStates = searchText => {
  const found = object.filter(obj => {
    return obj.key3.some(i => i.key4 == searchText)
  })
  matchList.textContent = JSON.stringify(found, null, 2)
}

search.addEventListener('input', () => searchStates(search.value))

<input type="text" id="search" class="form-control form-control-lg" placeholder="type here" />
<pre id="match-list"></pre>

And for matching values that starts with the search input value you can do this:

var object = [
  {
    key1: 'Test value 1',
    key3: [
      { key4: 'Test value 3', key5: 'Test value 4' },
      { key4: 'Test value 5', key5: 'Test value 6' },
    ],
  },

  {
    key1: 'Test value 11',
    key3: [
      { key4: 'Test value 13', key5: 'Test value 14' },
      { key4: 'Test value 15', key5: 'Test value 16' },
    ],
  },
]

const search = document.getElementById('search')
const matchList = document.getElementById('match-list')

searchStates = searchText => {
  if (!searchText) return (matchList.textContent = '')

  searchText = searchText.toLowerCase()
  const inputLength = searchText.length
  const found = object.filter(obj => {
    return obj.key3.some(
      i => i.key4.slice(0, inputLength).toLowerCase() == searchText
    )
  })
  matchList.textContent = JSON.stringify(found, null, 2)
}

search.addEventListener('input', () => searchStates(search.value))

<input type="text" id="search" class="form-control form-control-lg" placeholder="type here" />
<pre id="match-list"></pre>