How to change zIndex in react-select drowpdown

Question

I am using the react-select library to create autocomplete drop-down. I have used 2 drop-down parallel if 2nd has some data & I open first one then the zIndex problem comes. see the image

Answer 1

Add these lines in your all Select tag:

<Select 
    // other props
    menuPortalTarget={document.body} 
    styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
/>