Autocomplete scroll not working with react-window

Question

I am trying to use reac-window with Autocomplete.

This is the code base:

function renderRow(props) {
const { data, index, style } = props;
return React.cloneElement(data[index], {
    style: {
        ...style,
        top: style.top,
    },
});
}

const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {

const { children, role, ...other } = props;
const itemData = React.Children.toArray(children);

return (
    <div ref={ref} {...other}>
        <FixedSizeList
            width="100%"
            height={150}
            itemSize={50}
            itemCount={itemData.length}
            itemData={itemData}
            role={role}>
            {renderRow}
        </FixedSizeList>
    </div>
);
});

export default function VirtualizedAutocomplete() {

const accountNumberData = useSelector((state) => state.commAccountNumber.data);
const isLoadingAccountNumber = useSelector((state) => state.commAccountNumber.isLoading);

  return (
    <Autocomplete
        id="virtualize-demo1"
        multiple
        disableListWrap
        ListboxComponent={ListboxComponent}
        options={accountNumberData}
        renderInput={params => (
            <TextField
                {...params}
                variant="outlined"
                label="virtualize-demo1"
                fullWidth
            />
        )}
    />
);

According the documentation I need to make sure that the container has the role attribute set to listbox.

I assume that this is the issue but I am not sure what is wrong with my code?

Thank you