I have an array object named data. I render it's properties in a table and I want to implement search functionality where I enter an id to fetch it's corresponding data. Here is the code I used for fetching all of data array object into a table.

Filter.js (minimal code)

 <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>

The problem is When I add .filter((name) => name.match(new RegExp(searchValue, "i"))) in to my code, it returns to a blank screen.

What is my mistake here? Thanks