Поиск по нажатию кнопки

import {useState, useRef} from 'react';
import ReactDOM from 'react-dom/client';
 
const arr = [
  {
      "userId": 1,
      "id": 1,
      "title": "delectus aut autem",
      "completed": false
  },
  {
      "userId": 1,
      "id": 2,
      "title": "quis ut nam facilis et officia qui",
      "completed": false
  },
  {
      "userId": 1,
      "id": 3,
      "title": "fugiat veniam minus",
      "completed": false
  },
  {
      "userId": 1,
      "id": 4,
      "title": "et porro tempora",
      "completed": true
  },
  {
      "userId": 1,
      "id": 5,
      "title": "laboriosam mollitia et enim quasi adipisci quia provident illum",
      "completed": false
  }
]
const App = _ => {
  const [todos, setTodos] = useState(arr);
  const [dataSearch, setDataSearch] = useState('');
  const ri = useRef()
  const filteredTodos = todos.filter((obj, index, array) => {
    return obj.title.toLowerCase().includes(dataSearch);
  });
  const act = e => {
    e.preventDefault()
    setDataSearch(ri.current.value)
  }
  return <main>
    <div class='inputWithButton'>
      <form onSubmit={act}>
        <input ref={ri} type="text" placeholder="Поиск..." />
        <button>Искать</button>
      </form>
    </div>
    <div>
      <h3>Найдено:</h3>
      {filteredTodos.map(({ id, title }) => (
          <div key={id}>
          {id} - {title}
          </div>
      ))}
    </div>
  </main>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);