Mui 5 Autocomplete disablePortal prop not working

Question

I was using previous Mui version 4.11.4 with the Autocomplete component and everything worked well with the disablePortal prop.

However, i am using Mui 5 now and the autocomplete dropdown list sometimes show on top instead of always being on the bottom as what i wanted.

<Autocomplete
      disablePortal={true}
      id='controlled-demo'
      ref={idRef}
      name={id.current}
      onChange={(e, value) => {
        const id = idRef.current.getAttribute('name');
        handleOptionChange(e, value, id);
      }}
      options={getExercisesByCategoryAndMusclegroup(exercise)}
      getOptionLabel={(option) => `${option.title}`}
      isOptionEqualToValue={(option, value) => option.title === value.title}
      renderInput={(params) => (
        <TextField
          {...params}
          name='exercise'
          // onChange={(e, value) => handleOptionChange(e, value)}
          label='Search exercise...'
          variant='outlined'
          size={isMatched ? 'small' : 'medium'}
        />
      )}
/>

I've tried using a custom Popper component as i saw on another post setting the placement to 'bottom' but that didnt resolve my issue.

Is there a bug to the new v5? Anyone else is experiencing this?