Having problem in reset of checkboxes in react functional component want solution?

//Main functional component
function CustomizedTables(props) {
  const classes = useStyles();
  const [nameCheckbox, setnameCheckbox] = useState([]);
  const [emailCheckbox, setemailCheckbox] = useState([]);
  const [faxCheckbox, setfaxCheckbox] = useState([]);
  const [loopStopFlag, setFlag] = useState(true);
  const [emailFlag, setEmailFlag] = useState(false);
  const rows = props.data;

  //Initialization of checkboxes to true
  if (loopStopFlag) {
    let nameArray = [];
    let emailArray = [];
    let faxArray = [];
    rows.SupplierList.forEach((supplier, i) => {
      nameArray.push(true);
      if (supplier.Email) {
        emailArray.push(true);
      } else {
        emailArray.push(null);
      }
      if (supplier.Fax) {
        faxArray.push(true);
      } else {
        faxArray.push(null);
      }
    });
    setnameCheckbox(nameArray);
    setemailCheckbox(emailArray);
    setfaxCheckbox(faxArray);
    setFlag(false);
  }

  //Reseting all checkboxes
  const resetAllCheckbox = () => {
    let nameArray = [];
    let emailArray = [];
    let faxArray = [];

    rows.SupplierList.forEach((supplier, i) => {
      nameArray.push(false);
      if (supplier.Email) {
        emailArray.push(false);
      } else {
        emailArray.push(null);
      }
      if (supplier.Fax) {
        faxArray.push(false);
      } else {
        faxArray.push(null);
      }
    });
    setnameCheckbox(nameArray);
    setemailCheckbox(emailArray);
    setfaxCheckbox(faxArray);
    if (emailCheckbox.includes(true)) {
      setEmailFlag(false);
    } else {
      setEmailFlag(true);
    }
  };

  //Displaying data on screen
  return (
    <div>
      <Paper className={classes.root} style=>
        <Table className={classes.table} aria-label="customized table">
          <TableBody>
            {rows.SupplierList.map((row, i) => (
              <StyledTableRow key={i}>
                <StyledTableCell style= align="center">
                  <label>
                    {row.Name}{" "}
                    <input
                      type="checkbox"
                      style=
                      onChange={() => {
                        let arr = nameCheckbox;
                        arr[i] = !arr[i];
                        setnameCheckbox(arr);
                      }}
                      defaultChecked={nameCheckbox[i]}
                    />
                  </label>
                  <br />
                  <div style=>{row.Gbf && "GBF"}</div>
                </StyledTableCell>
                <StyledTableCell align="center" style=>
                  {row.Email && (
                    <React.Fragment>
                      <input
                        type="checkbox"
                        style=
                        onChange={() => {
                          let arr1 = emailCheckbox;
                          arr1[i] = !arr1[i];
                          setemailCheckbox(arr1);
                          if (emailCheckbox.includes(true)) {
                            setEmailFlag(false);
                          } else {
                            setEmailFlag(true);
                          }
                        }}
                        defaultChecked={emailCheckbox[i]}
                      />
                    </React.Fragment>
                  )}
                </StyledTableCell>
                <StyledTableCell align="center" style=>
                  {row.Fax && (
                    <React.Fragment>
                      <input
                        type="checkbox"
                        style=
                        onChange={() => {
                          let arr2 = faxCheckbox;
                          arr2[i] = !arr2[i];
                          setfaxCheckbox(arr2);
                        }}
                        value={faxCheckbox[i]}
                        defaultChecked={faxCheckbox[i]}
                      />
                    </React.Fragment>
                  )}
                </StyledTableCell>
              </StyledTableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>
      <br />
      <Button
        variant="danger"
        style=
        onClick={resetAllCheckbox}
      >
        Reset
      </Button>
    </div>
  );
}
export default CustomizedTables;

I am facing problem in reseting checkboxes. When I reset them only array is updating but no action is performing or checkboxes. I used both checked and defaultChecked in checked also facing problem that bool is updating but checkbox is not updating. I want a solution for it. Actually when I click on reset button then my checkboxes remain same form but state is updating