react select library and z-index

While using react select library, I had the z-index problem as the first picture. So I gave z-index -1 on select(classname : category-selection) and thought it was solved like the second picture, but the select option is not selected.

I also tried to apply below code

//jsx code
<StoreInputBox>
  <label> </label>
  <Select
     required
     menuPortalTarget={document.body} 
     styles={{ menuPortal: base => ({ ...base, zIndex: 99999 }) }}
     className = 'category-selection'
     options = {selectCategory}
     onChange = {(e)=>changeCategoryHandler(e)}
 />

//css code
export const StoreInputBox = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
&:nth-child(2){
  >div{
    z-index: -1;
    >div{
      border : 3px solid yellow;
      >div{
        border : 2px solid magenta;
      }
    }
  }

but it doesn't work. Haven't been able to solve it all day. What should I do?