如何获得下拉列表/自动完成建议在ReactJ中显示在模态之上？

Question

我有一种模态，可以提示用户在输入字段中输入具有自动完成功能的某些位置。但是，自动完整建议在模式中显示

以下是我的模态组件的代码。我正在使用MUI和@ress/combobox

const ContainerStyle = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    display: 'flex',
    flexDirection: { xs: 'column', md: 'row' },
    alignItems: 'center',
    bgcolor: 'background.paper',
    border: '1px solid #000',
    boxShadow: 24,
    borderRadius: '12px',
    margin: 0,
};


export const WelcomeModal = () => {
    const [open, setOpen] = useState(true)

    return ReactDOM.createPortal(<>
        <Modal
            aria-labelledby="transition-modal-title"
            aria-describedby="transition-modal-description"
            open={open}
            onClose={() => setOpen(false)}
            closeAfterTransition
            BackdropComponent={Backdrop}
            BackdropProps={{
                timeout: 500,
            }}
        >
            <Box sx={ContainerStyle} >
                <StartPlaces />
                <EndPlaces />
            </Box>
        </Modal>
    </>, document.getElementById("portal"))
}

下面是我的startplace component的代码。 终点组件是相同的。

export const StartPlaces = ()=>{
    const dispatch = useDispatch()
    const {ready, value, setValue, suggestions: {status, data}, clearSuggestions} = usePlacesAutocomplete();

    const handleSelect = async (val)=>{
        
        setValue(val, false);
        clearSuggestions();

        const results = await getGeocode({address: val});
        // console.log(results[0])
        const {lat, lng} = await getLatLng(results[0])
        dispatch(setOrigin({
            coordinates: {lat, lng},
            name: val
        }))
    }

    return<>
        <h4>Enter Origin</h4>
        <Combobox onSelect={handleSelect}>
            <ComboboxInput value={value} onChange={(e) => setValue(e.target.value)} className="combobox-input" placeholder="Houston, Texas" disabled={!ready}/>
            <ComboboxPopover>
                <ComboboxList style={{zIndex: 3000}}>
                    {status === "OK" && data.map(({place_id, description}) =><ComboboxOption key={place_id} value={description}/>)}
                </ComboboxList>
            </ComboboxPopover>
        </Combobox>
    </>
}

由于我在Portal中渲染所有内容，因此我无法想到发生这种情况的原因。我尝试在zindex中弄乱comboboxlist，但似乎不起作用。任何帮助或建议将不胜感激:)预先感谢您。