Nested Table on Click of the arrow - reactjs

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.