Using virtual scroll on third party components

[Sagie501]

Hi!
I am using ant design as a design system for my application.
I am facing an issue that I have Collapse component with a lot of Panel components within it so I have scroll to see them all, so I wanted to add a virtual scroll to handle the case that I have a lot of Panels.
The main problem is that the Panel components must be a direct children of the Collapse component so trying add a div with full height between the scroll container and the children list (as the documentation guided) just breaks ant styles:

const MyCollapse: FC = () => {
    const panelsData = []; // A lot of items here
    const rowVirtualizer = useVirtualizer({
        count: panelsData.length,
        getScrollElement: () => document.getElementsByClassName('.ant-collapse')[0],
        estimateSize: () => 50,
        overscan: 10,
    });

    return (
        <Collapse>
            <div style={{
                            height: `${rowVirtualizer.getTotalSize()}px`,
                            width: '100%',
                            position: 'relative',
                        }}>
                {rowVirtualizer.getVirtualItems().map((virtualItem) => {
                    const panel = panelsData[virtualItem.index];
                    return <Panel>{/*  Panel content here  */}</Panel>
                 })}
            </div>
        </Collapse> 
    );
};

Is there a way to overcome this problem?