Фильтр с использованием формы React Hook не работает? ⇐ Javascript

[Anonymous]

Я создаю небольшой список, используя форму React Hook с UseFieldArray. Я хочу отфильтровать список, когда пользователь набирает что -либо в поле поиска. Однако фильтрация не работает. Не могли бы вы предложить решения?
ниже мой код:
https://playcode.io/2322411

Код: Выделить всё

import React from 'react';
import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form';
import ReactDOM from 'react-dom';

let renderCount = 0;

export function App() {
const { register, control, handleSubmit, reset, watch } = useForm({
defaultValues: {
test: [
{ firstName: 'Bill 1', lastName: 'Luo' },

{ firstName: 'hello2', lastName: 'Luo' },

{ firstName: 'test 3', lastName: 'Luo' },
{ firstName: 'test 4', lastName: 'Luo' },
],
},
});
const { fields, append, prepend, remove, swap, move, insert, replace } =
useFieldArray({
control,
name: 'test',
});

const onSubmit = data => console.log('data', data);

const [searchQuery, setSearchQuery] = React.useState('');

const handleSearchChange = event => {
setSearchQuery(event.target.value);
};

const filteredRows = fields.filter(row =>
row.firstName.toLowerCase().includes(searchQuery.toLowerCase())
);

console.log(JSON.stringify(filteredRows));
return (




[list]
{filteredRows.map((item, index) => {
return (
[*]


 }
name={`test.${index}.lastName`}
control={control}
/>

);
})}
[/list]


);
}

// Log to console
console.log('Hello console');

Проблема : Когда я ищу «тест», он показывает первые два ряда вместо двух последних строк .. Не знаю, почему?

Подробнее здесь: https://stackoverflow.com/questions/795 ... ot-working