Would like to add space between items rendered in a Table using React-Virtualized

Question

I am creating a Table using React-Virtualized. I am using Autosizer and attempting to insert a gap between each element so there is space between each row. Each of my rows is an expandable element with additional information contained within an accordion.

Ive tried attaching padding, margins, and additional div elements to several palces within the Row Renderer and attempted to force it with CSS. It appears the rows are positioned using absolute positioning that is somehow based on the height of the initial element.

If I manually add an additional (10px*rowNumber) to each rows "TOP" attribute, I get exactly what I want, however I cant figure out where the "Top" value is being set.

import React, { useState, useRef, useEffect, Fragment } from "react";
import { AutoSizer, Column, Table, defaultTableRowRenderer } from "react-virtualized";
import { DropDown } from '../Assets/Icons/Icons';
import { InsertCryptoIcon } from '../Assets/Icons/CryptoIcons/CryptoIcons';
import "react-virtualized/styles.css";
import "./TxJournalTable.css";

export const TxJournalTable = React.memo(({ list }) => {
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const tableRef = useRef();

  const Details = ({ children, index }) => (
    <div style={{ cursor: "pointer" }} onClick={() => setSelectedIndex(index)}>
      {children}
    </div>
  );

  const _getDatum = index => list[index % list.length];
  const _getRowHeight = ({ index }) => (index === selectedIndex ? 116 : 68);
  const rowGetter = ({ index }) => _getDatum(index);
  const cellRenderer = ({ rowIndex }) => {
    if (rowIndex !== selectedIndex) {
      return <Details index={rowIndex}><DropDown style={{'boxSizing': 'border-box', 'height': '12px', 'width': '20px'}}/></Details>;
    } else {
      return <Details index={-1}><DropDown style={{'boxSizing': 'border-box', 'height': '12px', 'width': '20px', 'transform': 'rotate(180deg)'}}/></Details>;
    }
  };

  useEffect(
    () => {
      tableRef.current.recomputeRowHeights();
    },
    [selectedIndex]
  );

  const rowRenderer = props => {
    const { index, style, className, key, rowData } = props;
    if (index === selectedIndex) {
      return ( 

         <div
          style={{ ...style, display: "flex", flexDirection: "column",  backgroundColor: '#303050',  
          borderRadius: 8,
          border:'1px solid red'}}
          className={className}
          key={key}
        >
          {defaultTableRowRenderer({
            ...props,
            style: { width: style.width, height: 48}
          })}
          <div
            style={{
              marginRight: "auto",
              marginLeft: 80,
              height: 48,
              display: "flex",
              alignItems: "center",
              color:"#ffffff"
            }}
          >
            <span><InsertCryptoIcon currency={rowData.account1currency} /></span>
            <span>{rowData.txDate}</span>
            <span>{rowData.value}</span>
            <span>{rowData.account1name}</span>
            <span>{rowData.account1number}</span>
            <DropDown style={{'boxSizing': 'border-box', 'height': '12px', 'width': '20px', 'transform': 'rotate(-90deg)'}}/>
            <span>{rowData.account2name}</span>
            <span>{rowData.account2number}</span>
            <span>{rowData.fee}</span>
            <span>{rowData.memo}</span>
          </div>

        </div>

      );
    }
    return defaultTableRowRenderer(props);
  };
  const TxRowStyles = {
    backgroundColor: '#303050',  
    borderRadius: 8,
    // border:'1px solid red'
  }

  const TxHeaderStyles = {
    color:'blue',
    // backgroundColor:'red'
  }

  return (
    <div style={{ height: "500px" }}>
      <AutoSizer>
        {({ height }) => (
          <Table
            headerHeight={56}
            height={height}
            overscanRowCount={10}
            rowHeight={68}
            rowGetter={rowGetter}
            rowCount={list.length}
            width={1119}
            ref={tableRef}
            rowRenderer={rowRenderer}
            headerStyle={TxHeaderStyles}
            rowStyle={TxRowStyles}
            // gridStyle={TxGridStyles}
          >
            <Column
              label="Index"
              cellDataGetter={({ rowData }) => rowData.length}
              cellRenderer={cellRenderer}
              dataKey="index"
              disableSort
              width={60}
            />
            <Column dataKey="txDate" disableSort label="Time" width={120} style={{color:"#ffffff"}}/>
            <Column dataKey="value" disableSort label="Value" width={120} style={{color:"#ffffff"}}/>
            <Column dataKey="description" disableSort label="Description" width={120} style={{color:"#ffffff"}}/>
            <Column dataKey="status" disableSort label="Status" width={120} style={{color:"#ffffff"}}/>
            <Column dataKey="link" disableSort label="Link" width={120} style={{color:"#ffffff"}}/>
          </Table>
        )}
      </AutoSizer>
    </div>
  );
});

No matter what I try, I the Top attribute stays the same. Margins and padding do not reproduce the desired result since I want the grid to have a transparent background while each row has a background.