how can I pull react-select's drop-down menu above(it's z-index) ExpansionPanel?

I've used react-select in ExpansionPanel(a component of material-ui) , it has made ExpansionPanel an unwanted scroll. how can I fix it? I tried to change z-index , but didn't work. consider third select in picture, it's drop down been hidden by ExpansionPanel. thank you in advance.

                <Select
                   value={state.selectedPerson}
                   onChange={handleMitarbeiterChange}
                   options={state.peopleOptions}
                   textFieldProps={{
                   label: 'Mitarbeiter',
                   id: "mitarbeiter-required",
                   InputLabelProps: {
                     shrink: true,
                   },
                 }}
                />

I searched in many resources and tried many ways (such as z-index, overflow, position, ...), non of them worked . finally I found the answer on this link : enter link description here

and this is the answer that worked for me:

If you are using v2 of react-select, you can use the menuPortalTarget prop to render the dropdown into a parent container (e.g. body) of the footer.

<Select
    { ... }
    menuPortalTarget={document.querySelector('body')}
/>