Nested Table on Click of the arrow

Question

I have a table which has arrow on each row. When the arrow is clicked, the row is expected to expand and show more data in a tabular form. When the arrow is clicked again, the expanded nested table should collapse. The code is in typescript.

This is what I have so far. I have created the first table and able to display the data.I am not able to find the right way to display the second nested table.

    const columns = [
    "First Name",
    "Last Name",
  ];

const [openRows, setOpenRows] = useState<Record<string, boolean>>({});

  const toggleRow = (dataRow: any) =>
    setOpenRows((prevState) => ({
      ...prevState,
      [dataRow.userId]: true,
    }));

return (
    <Paper elevation={3} variant="outlined">
      <TableContainer className={classes.container}>
        <Table stickyHeader classes={{ root: classes.tableRoot }}>
          <colgroup>
            <col width="5%" />
            <col width="10%" />
            <col width="15%" />
          </colgroup>
          <TableHead>
            <TableRow>
              {columns.map((column, idx) => (
                <TableCell
                  key={column}
                  className={classes.cell}
                  role="columnheader"
                  colSpan={idx === 0 ? 2 : 1}
                >
                    <Typography variant="h6">{column}</Typography>     
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((dataRow) => (
              <TableRow
                key={dataRow.userId}
                title="tableRow"
                className={classes.tableRow}
                classes={{ hover: classes.hover }}
                hover
              >
                <TableCell classes={{ root: classes.arrowCell }}>
                  <IconButton
                    size="small"
                    onClick={() => toggleRow(dataRow.userId)}
                  >
                    {openRows ? <ArrowDropDownIcon /> : <ArrowDropUpIcon />}
                  </IconButton>
                  <Collapse
                    in={openRows[dataRow.userId] ?? false}
                    timeout="auto"
                    unmountOnExit
                  >
                    <Box margin={1}>         
                      <TableCell>{dataRow.jobDetails.company}</TableCell>
                      <TableCell>{dataRow.jobDetails.title}</TableCell>
                    </Box>
                  </Collapse>
                </TableCell>                                                          
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Paper>
  );
};

export interface UserData {
  userId: string;
  firstName: string;
  lastName: string;
  jobDetails: {
    company: string;
    title: string;
  };
}

interface UserDataProps {
  data: UserData[];
}

Thank you so much.