How to combine React-Virtualized with Material UI grid or Bootstrap Gird?

Question

I have a simple layout of a grid that I would like to virtualize it.

 <Grid
          maxWidth='xl'
          height='100%'
          container
          direction='row'
          justifyContent='center'
          alignItems='stretch'
          gap={{ xs: 2, lg: 2.5 }}
          py={4}
          px={{ xs: 2, lg: 0 }}
          sx={{ border: '1px solid red' }}
        >
          <VirtualizedScroll>
            {userInventoryItems?.map((item) => (
              <Grid
                item
                xs={8}
                sm={5}
                md={3}
                xl={2.2}
                key={item.ItemInstanceId}
                sx={{ border: '1px solid blue' }}
              >
                <ItemCard
                  style={{ height: '100%' }}
                  image={getCardImage(item)}
                  title={item.DisplayName}
                  category={item.Tags?.[0] ?? ''}
                  categoryColor={getRarityColor(item.Tags?.[0])}
                  description={item.Description}
                  amountOfItemOwned={
                    item.RemainingUses > 1 && item.RemainingUses
                  }
                  showButton={item.ItemClass === 'Pack'}
                  onClick={() => openPack(item)}
                />
              </Grid>
            ))}
          </VirtualizedScroll>
        </Grid>

I have created a component VirtualizedScroll; now I get rendered only 1 card on a row.

This is the component:

const VirtualizedScroll = ({ children }: DataProps) => {
  const defaultHeight = 700;

  const cache = useRef(
    new CellMeasurerCache({
      fixedWidth: true,
      defaultHeight: 100,
    })
  );

  return (
    <div className={styles.autoSizerWrapper}>
      <AutoSizer className={styles.dataContainer}>
        {({ width, height }) => (
          <List
            width={width}
            height={height ?? defaultHeight}
            rowHeight={cache.current.rowHeight}
            deferredMeasurementCache={cache.current}
            rowCount={children.length}
            rowRenderer={({ key, index, style, parent }) => {
              const data = children[index];

              return (
                <CellMeasurer
                  key={key}
                  cache={cache.current}
                  parent={parent}
                  columnIndex={0}
                  rowIndex={index}
                >
                  <div style={style}>{data}</div>
                </CellMeasurer>
              ) as React.ReactNode;
            }}
          />
        )}
      </AutoSizer>
    </div>
  );
};

Now I understand why this occurs. Is it because the <List /> renders solely as a list.

The issue lies in my attempt to utilize the <Grid /> component, I am unable to make it function properly. I need a solution that I can use the grid from material-ui mainly for responsiveness. I've experimented with both <List />, segregating the rows by populating an empty array with items in groups of five, I also tried react-window. Although I made it work with react-window, I was not able to add gaps and configure the correct rowHeight, among other things.

Does anyone know how I could implement virtualization using the mui grid or even bootstrap?