Had the same issue. The only way to fixing this was to create a "invisible" header for the subitems and dynamically set the width of the columns. For me the working code looks like this:

  useLayoutEffect(() => {
    if(openedItem) {
      const hardcodeWidths = () => {
        const headers = Array.from(document.getElementsByClassName('headerCell'));
        const subTableParentRow = document.getElementsByClassName(`expandable_${openedItem}`)[0]
        const subTableColumns = subTableParentRow.getElementsByClassName('subTableColumn');
        headers.forEach((header, i) => {
          (subTableColumns[i] as HTMLElement).style.width = `${header.clientWidth}px`
        })
      }

      hardcodeWidths()
      addEventListener('resize', hardcodeWidths)
      return () => {
        removeEventListener('resize', hardcodeWidths)
      }
    }
  }, [openedItem])






  <Table sx={{ minWidth: 650 }} aria-label="Talaria table" >
    <TableHead className={style.tableHead}>
      <TableRow>
        {props.hasStickyFirstRow && <TableCell />}
        {props.headers.cells.map((cell, index) => (
          <TableCell className='headerCell' align="center" key={index}>{cell.displayValue}</TableCell>  
          ))}
        {props.hasStickyFirstRow && <TableCell />}
      </TableRow>

      {props.hasStickyFirstRow &&
        <TableRow className={style.stickyHeader}>
          <TableCell> <LockedProtected className={style.tableLockIcon}/> </TableCell>
          {props.headers.cells.map((cell, index) => (
            <TableCell align="center" key={index}>
              {props.selectedStickyRow[cell.key]}
            </TableCell>
          ))}
          <TableCell/>
        </TableRow>
       }
    </TableHead>
    <TableBody>
      {(rowsPerPage > 0
        ? props.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
        : props.rows
      ).map((row) => {
        return(
        <>
        <TableRow
          key={row[props.uniqueElement]}
          sx={{
            '&:last-child td, &:last-child th': { border: 0 },
            ...(!(props.hasStickyFirstRow) && {
            cursor: 'pointer',
            }),
          }}
          className={style.tableBody}
          onClick={props.canClickRow ? () => props.onRowClick(row) : undefined}
        >
          { props.hasStickyFirstRow && <TableCell>
            <IconButton
              aria-label="expand row"
              size="small"
              onClick={() => setOpenedItem(openedItem === row[props.uniqueElement] ? '' : row[props.uniqueElement] )}
            >
              {openedItem === row[props.uniqueElement] ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
            </IconButton>
          </TableCell>}
          {props.headers.cells.map((cell) => (
          <TableCell align="center">
            {row[cell.key]}
          </TableCell>
          ))}
          { props.hasStickyFirstRow && <TableCell>
              <Radio
                checked={row[props.uniqueElement] === props.selectedRadioRowId}
                onChange={() => props.setSelectedRadioRowId && props.setSelectedRadioRowId(row[props.uniqueElement])}
                // TODO: disabled  // Here will need to add a logic to be disabled or maybe  primary color or 'secondary' if the table is disabled
              />
          </TableCell>}
        </TableRow>
        { props.hasStickyFirstRow && <TableRow className={`expandable_${row[props.uniqueElement]}`}>
            {/* TODO: when BE comes with a data format please make sure to change the keys (also up) */}
            {/* Added this table cell for alignment purposes */}
            <TableCell key={'dummyStartCell'} style={{padding: 0}}/> 
            <TableCell style={{ padding: 0 }} colSpan={props.headers.cells.length}>
                <Collapse in={openedItem === row[props.uniqueElement]} timeout="auto" unmountOnExit>
                    <Table >
                      <colgroup>
                        {props.headers.cells.map(() => (
                          <col className='subTableColumn' />
                        ))}
                      </colgroup>
                      <TableBody>
                        {row.rowDetails.map((rowDetails:any, key:string) => (
                          <TableRow key={key} className='subtableCell' sx={{ '&:last-child td, &:last-child th': { border: 0 } }} >
                            {props.headers.cells.map((cell, index) => (
                              <TableCell align="center" key={cell.key}>
                                {rowDetails[cell.key]}
                              </TableCell>
                            ))}
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                </Collapse>
            </TableCell>
            {/* Added this table cell for alignment purposes */}
            <TableCell key={'dummyEndCell'} style={{padding: 0}}/> 
        </TableRow> }
        </>
      )})}
    </TableBody>
  </Table>