Is there a way to integrate useVirtual with Material-UI Select - reactjs

Question

Material-UI Select is lagging when there is more than 200 options.
It's a known issue - https://github.com/mui-org/material-ui/issues/17001
and I try to workaround it using useVirtual hook, of react-virtual.
so far it doesn't work well.
I created this sandbox: https://codesandbox.io/s/lucid-ritchie-j2c13?file=/src/Demo.tsx
if there is another way to virtualize the items in Material-UI Select, I'll take it.
this is my code:
import * as React from "react";
import Select from "#material-ui/core/Select";
import MUIMenuItem from "#material-ui/core/MenuItem";
import { useVirtual } from "react-virtual";
export default function Demo() {
const parentRef = React.useRef<any>();
const [value, setValue] = React.useState(1);
const rowVirtualizer = useVirtual({
size: 10000,
parentRef,
estimateSize: React.useCallback(() => 35, []),
overscan: 5
});
return (
<Select
MenuProps={{
ref: parentRef,
style: {
height: "200px",
width: `400px`,
overflow: "auto"
},
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
getContentAnchorEl: null,
MenuListProps: {
style: {
height: `${rowVirtualizer.totalSize}px`,
width: "100%",
position: "relative"
}
}
}}
value={value}
onChange={(e: any) => setValue(e.target.value)}
>
{rowVirtualizer.virtualItems.map(({ index, size, start }) => (
<MUIMenuItem
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: `${size}px`,
transform: `translateY(${start}px)`
}}
key={index}
value={String(index)}
>
<div>{index}</div>
</MUIMenuItem>
))}
</Select>
);
}