How to get dropdown/autocomplete suggestions to display on top of Modal in ReactJS?

I have a modal that prompts the users to enter some locations in an input field with autocomplete functionality. However, the autocomplete suggestions are displayed behind in the modal

Below is the code for my modal component. I am using MUI and @reach/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"))
}

Below is the code for my StartPlaces component. EndPlaces component is identical.

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

I couldnt think of a reason why this is happening since I am rendering everything in the portal. I tried messing with the zIndex in my ComboboxList but it doesnt seem to work. Any help or suggestions would be greatly appreciated :) Thank you in advance.