I looking for help sorting out problem I encountered recently while working with React-Window and MUI Collapsible Table Rows.

In general react-window render row for each of my item in the array, with some of the content hidden till we press arrow. When pressed, below our column appear new one with hidden content.

 function Row({ index, style }) {
   const [showList, toggleShowList] = useState(false);   
   
   return (
    <Fragment>
      <TableRow sx={style}>
         <TableCell>Visable Row:{index}</TableCell>
         <TableCell>
            <IconButton
                  aria-label="expand row"
                  size="small"
                  onClick={() => toggleShowList(!showList)}
                >
                  {showList ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
            </IconButton>
         </TableCell>
       </TableRow>
       <TableRow sx={{ style, display: showList ? "table-row" : "none" }}>
          <TableCell>hidden row:{index}</TableCell>
       </TableRow>
     </Fragment>
    );
  }

Above example is based on MUI Table component page. Problem arise when I passing it to React-Window as its display hidden content out of place.

I try to using useRef() for calculating Row Height but its has no effect on hidden element.

I open for suggestions and solutions. I created an example on code Sandbox with both how its actually work and how (it should) I want it to work.