Fixed row and column with react-virtual module - reactjs

Question

When I override the div with a column index of 0 that has position absolute and give it a position sticky with left: 0 the first column style just breaks.
Is it possible to have fixed columns or rows with react-virtual?
combineStyles is a function that I wrote to make me able to conditionally add some styles to an element.
const VirtualTable = <T,>({ columns, data }: ITableProps<T>) => {
const parentRef = React.useRef<HTMLDivElement | null>(null);
const rowVirtualizer = useVirtual({
size: data.length,
parentRef,
estimateSize: React.useCallback((i) => 50 as any, []),
overscan: 5,
});
const columnVirtualizer = useVirtual({
horizontal: true,
size: columns.length,
parentRef,
estimateSize: React.useCallback((i) => 100, []),
overscan: 5,
});
return (
<>
<div
ref={parentRef}
className="List"
style={{
height: `calc(100vh) - ${shapes.headerHight}px`,
width: `100%`,
overflow: "auto",
}}
>
<div
style={{
height: `${rowVirtualizer.totalSize}px`,
width: `${columnVirtualizer.totalSize}px`,
position: "relative",
}}
>
{rowVirtualizer.virtualItems.map((virtualRow) => (
<React.Fragment key={virtualRow.index}>
{columnVirtualizer.virtualItems.map(
(virtualColumn, columnIndex) => {
return (
<div
key={virtualColumn.index}
style={combineStyles([
{
position: "absolute",
top: 0,
left: 0,
width: `${virtualColumn.size}px`,
height: `${virtualRow.size}px`,
transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
},
columnIndex === 0 &&
{
position: "sticky",
},
])}
>
Cell {virtualRow.index}, {virtualColumn.index}
</div>
);
}
)}
</React.Fragment>
))}
</div>
</div>
</>
);
};