Activate "react-scrollbars-custom" with "react-window-infinite-loader" and also "react-window-infinite-loader"

InfiniteScrollListWithCustomScrollbar.tsx

import React, { useCallback, forwardRef } from 'react';
import Scrollbar from 'react-scrollbars-custom';

import InfiniteLoader from 'react-window-infinite-loader';
import { FixedSizeList } from 'react-window';

const CustomScrollbars = ({ onScroll, forwardedRef, style, children }) => {
  const refSetter = useCallback((scrollbarsRef) => {
    if (scrollbarsRef) {
      forwardedRef(scrollbarsRef);
    } else {
      forwardedRef(null);
    }
  }, []);

  return (
    <Scrollbar
      ref={refSetter}
      style={{ ...style, overflow: 'hidden' }}
      onScroll={(e: any) => {
        onScroll({
          currentTarget: {
            clientHeight: e.clientHeight,
            scrollHeight: e.scrollHeight,
            scrollTop: e.scrollTop,
          },
        });
      }}
    >
      {children}
    </Scrollbar>
  );
};

const CustomScrollbarsVirtualList = React.forwardRef((props, ref) => (
  <CustomScrollbars {...props} forwardedRef={ref} />
));

// ... In your component or function

<InfiniteLoader {...rest} >
  {({ onItemsRendered, ref }: any) => (
  <FixedSizeList
    outerElementType={CustomScrollbarsVirtualList}
    {...rest}
  />
)}
</InfiniteLoader>

In this example I activate three elements together:
react-scrollbars-custom
react-window/FixedSizeList
react-window-infinite-loader