how to handle checkboxes with multiple rows?

I had a file that has this composition (row was loading from the table):

 row:
    id
    name
    status


 const toggleCheckbox = (row) => {
    const rowId = view.filter((viewItem) => viewItem.id === row.id);
    if (rowId.length === 0) {
        setView(row.name)
        row.status = true
    } else {
        setView(view.filter((viewItem) => viewItem.id !=== row.id);
        row.status = false;
    }
    saves in table
 }
  
 <TableBody>
     {row.map((row) => 
         <TableRow key={row.id}>
              <TableCell align='center'>
                    <Checkbox color={'default'}
                              onChange={() => toggleCheckbox(row)}
                    />
              </TableCell>
              <TableCell>
                  {row.name}
              </TableCell>
         </TableRow>)}
      </TableBody>

 {view.map((item) => (
      <h1>view.name</view>)}

Now I would explain what toggleCheckbox does, Everytime the checkbox is check, the information below will appear (view) map then I have control in the checkboxes manually. My problem is when it loads a new file where some of the data has a status equal true then the checkbox is check and view also triggers on that row and still I have control manually.