react custom scrollbar with react-window

I am using react-custom-scrollbar and would like to integrate it with FixedSizeList.

I have checked the solution on this issue on react-virtualized: https://github.com/bvaughn/react-virtualized/issues/692#issuecomment-339393521

But the code is throwing error: Uncaught TypeError: Cannot read property 'handleScrollEvent' of undefined on scroll, in this function:

  handleScroll = ({ target }) => {
    const { scrollTop, scrollLeft } = target;

    const { Grid: grid } = this.List;

    grid.handleScrollEvent({ scrollTop, scrollLeft });
  }

I have added ref={ instance => { this.List = instance; } } on fixedSixe<List component.

[piecyk]

Better approach would be to pass Scrollbars as outerElementType

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

  return (
    <Scrollbars
      ref={refSetter}
      style={{ ...style, overflow: "hidden" }}
      onScroll={onScroll}
    >
      {children}
    </Scrollbars>
  );
};

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

// ...

<FixedSizeList
  outerElementType={CustomScrollbarsVirtualList}
  {...rest}
/>

example https://codesandbox.io/s/vmr1l0p463

[bvaughn]

I love how many advanced things are possible using outerElementType or innerElementType