React Select Overlaps With Label

Question

I am using react-select ^5.1.0 and my options and values are displayed well. I have a small issue when scrolling the options, a select word overlapps the options. I have attached an image that can explain better. What can i do to remove the select word on my options? It blocks them.

My code :

const methods = useForm();

<label> Line Manager : </label>
   <Controller
     control={methods.control}
     className="basic-single"
     classNamePrefix="select"
     styles={{ marginTop : '10px', marginBottom : '10px'}}
     name="line_manager"
      render={({ value, ref }) => (
       <Select
         inputRef={ref}
         options={items}
         className="basic-multi-select"
         value={items.find(c => c.fullnames === value)}
         onChange={val => setLineManager(val.id)}
         getOptionLabel={items => items.fullnames}
         getOptionValue={items => items.id}
       />
     )}
  />

Answer 1

Looks like the label on those select boxes have a higher z-index than that of the options box. Ideally, you need to increase the z-index of the options overlay.