Estoy tratando de crear una función de búsqueda, estoy siguiendo el código de https://www.freecodecamp.org/news/how-to-react-components/ Tenga en cuenta que estoy usando mi propia "API" y no el que usa freecodecamp. Sin embargo, recibo un error que dice: No se pueden leer las propiedades de undefined (leyendo 'toString') ¿Cuál podría ser la causa de esto?

Aquí está mi código, es idéntico, la única diferencia es la URL de obtención.

 import React from 'react' import { useEffect } from 'react'; import { useState } from 'react'; function Main() { const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [items, setItems] = useState([]); const [query, setQuery] = useState(""); const data = Object.values(items); const search_parameters = Object.keys(Object.assign({}, ...data)); // const search_parameters = ["title", ...data] function search(data) { return items.filter( (item) => search_parameters.some((parameter) =>//Error here item[parameter].toString().toLowerCase().includes(query) ) ); } useEffect(() => { fetch('http://localhost:3005/movies') .then(res => res.json()) .then( (result) => { setIsLoaded(true); setItems(result); }, (error) => { setIsLoaded(true); setError(error); } ) }, []) if (error) { return <div>Error: {error.message}</div>; } else if (!isLoaded) { return <div>Loading...</div>; } else { return ( <> <input type="search" name="search-form" id="search-form" className="search-input" placeholder="Search for..." onChange={(e) => setQuery(e.target.value)} /> <div className='card-wrapper'> {search(data).map((item)=>( <div className="movie-card"> <p className="title">{item.title}</p> <br></br> <img src={item.cover} className="card-img"/> <br></br> </div> ))} </div> </> ); } } export default Main