Tengo un objeto de matriz llamado data . Presento sus propiedades en una tabla y quiero implementar la funcionalidad de búsqueda donde ingreso una id para obtener sus datos correspondientes. Aquí está el código que usé para obtener todos los objetos de matriz de data en una tabla.

Filter.js (código mínimo)

 <h2>Search filtering</h2> <input type="text" name="search" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} /> <TableBody> {data?.companyProfileDtos?.filter((name) => name.match(new RegExp(searchValue, "i"))) ?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((row) => ( <TableRow key={row.name} sx={{ "&:last-child td, &:last-child th": { border: 0 } }} > <TableCell align="center" component="th" scope="row"> {row.id} </TableCell> <TableCell align="center">{row.companyName}</TableCell> <TableCell align="center">{row.emailAddress}</TableCell> <TableCell align="center">{row.phoneNumber}</TableCell> <TableCell align="center">{row.city}</TableCell> <TableCell align="center">{row.companyRating}</TableCell> </TableRow> ))} </TableBody>

El problema es que cuando agrego .filter((name) => name.match(new RegExp(searchValue, "i"))) a mi código, vuelve a una pantalla en blanco.

¿Cuál es mi error aquí? Gracias