Nested tables do not properly expand

[nyurik]

Simple repo: https://codesandbox.io/s/modest-mclaren-ku8v3 -- expand the first row, and expand the first row of the first subrow. Instead of properly showing 3 headers one after another, the top portion of the table is hidden.

copy of the sample code from above

import React, {useState, useMemo} from "react";
import { render } from "react-dom";
import "./styles.scss";
import "./index.css";

import {
  EuiInMemoryTable,
  EuiButtonIcon,
} from '@elastic/eui';

let tableCounter = 0;

export const Table = () => {
  const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState({});

  const toggleDetails = item => {
    const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };
    if (itemIdToExpandedRowMapValues[item.id]) {
      delete itemIdToExpandedRowMapValues[item.id];
    } else {
      itemIdToExpandedRowMapValues[item.id] = (<Table />);
    }
    setItemIdToExpandedRowMap(itemIdToExpandedRowMapValues);
  };

  const columns = [
    {
      field: 'row',
      name: 'Row Name',
    },
    {
      name: 'Click to Expand',
      isExpander: true,
      render: item => (
        <EuiButtonIcon
          onClick={() => toggleDetails(item)}
          aria-label={itemIdToExpandedRowMap[item.id] ? 'Collapse' : 'Expand'}
          iconType={itemIdToExpandedRowMap[item.id] ? 'arrowUp' : 'arrowDown'}
        />
      ),
    },
  ];

  const items = useMemo(() => {
    function createItems(count) {
      let index = 0;
      tableCounter++;
      return Array.apply(0, Array(count)).map(() => ({
        id: `${++index}`,
        row: `row ${index} in table ${tableCounter}`,
      }));
    }
    return createItems(20);
  }, []);

  return (
      <EuiInMemoryTable
        items={items}
        itemId="id"
        itemIdToExpandedRowMap={itemIdToExpandedRowMap}
        isExpandable={true}
        columns={columns}
      />
  );
};


render(<Table />, document.getElementById("app"));