javascript - 自动完成滚动不适用于反应窗口

Question

我正在尝试将 reac-window 与Autocomplete一起使用。

这是代码库：

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
            />
        )}
    />
);

根据文档，我需要确保容器的角色属性设置为列表框。

我认为这是问题所在，但我不确定我的代码有什么问题？

谢谢