menuPortalTarget doesn't not work if react-select dropdown opens inside modal

I have a problem react-select dropdown opens inside modal

Below is my coding:

<Select                
styles={{
  menu: provided => ({ ...provided, zIndex: 9999 })
}}
options={optionsHour}
value={{ label: durationHour, value: durationHour }}
onChange={(e) => { setDurationHour(e.value) }}
>
</Select>

This one is the current result, it cannot show react_select dropdown over modal.

I tried the below code with using menuPortalTarget, but it also cannot work.

<Select                
styles={{
  menu: provided => ({ ...provided, zIndex: 9999 })
}}
menuPortalTarget={document.body}
options={optionsHour}
value={{ label: durationHour, value: durationHour }}
onChange={(e) => { setDurationHour(e.value) }}
>
</Select>

Below result is what I've tried:

Actually, I want the result like below the picture:

Hope someone can guide me on how to solve it. Thanks.