REACT Dynamic checkboxes

Purpose: I want to create any # of rows containing any # of checkboxes that will be handled by a useState hook.

Problem: Page becomes frozen / constant loading state with nothing showing. No console logs, and debugger doesn't even start. React usually will prevent endless loops of updates. But in this case it didn't get caught.

What I've tried:

• console.logs (nothing gets outputted)
• debugger statements (nothing gets paused)
• Cant do much bc of frozen page.

CODE:

const CreateCheckboxes = ({ rows, cols }) => {
  const classes = useStyles()

  const [checked, setChecked] = useState({})
  const [isLoaded, setIsLoaded] = useState(false)

  //temp initializer
  let state = {};

  //configures state based on unique checkbox name.
  const handleChange = (e) => {
    const value = {
      ...checked,
      [e.target.name]: e.target.checked,
    }
    setChecked(value)
  };

  //Helper function
  const createBoxes = (row, col) => {
    let rowArr = [];

    for (let i = 0; i < row; i++) {
      let checkboxArr = []

      for (let j = 0; i < col; j++) {
        checkboxArr.push(
          <Checkbox
            name={`row-${i}-checkbox-${j}`} //unique identifier in the state.
            checked={checked[`row-${i}-checkbox-${j}`]}
            onChange={(e) => handleChange(e)}
          />
        )

        //store temp state so that react useState is given a list of initialized 'controlled' states.
        //react deosnt like undefined states.
        state[`row-${i}-checkbox-${j}`] = false;
      }

      rowArr.push(
        <div className={classes.row}>
          <Typography>{`Sound ${i}`}</Typography>
          {/* JSX array */}
          {checkboxArr}
        </div>
      )
    }

    // JSX array
    return rowArr
  }

  //output as a jsx array of 'x row divs' contiaining 'y checkboxes'
  const sequenceData = createBoxes(rows, cols)

  useEffect(() => {
    setChecked(state)
    setIsLoaded(true)
  }, [])

  return isLoaded && (
    <>
      {sequenceData}
    </>
  );
}