How to change zIndex in react-select drowpdown in a way that the react-calendar component does not overlap? previous questions did not work

Question

I tried everything written in this previous question, the problem is that the select dropdown is behind the other input field called "select..." which is also coming from another library: react-modern-calendar-date-picker. Not sure why does not work, I also tried to create another css page and add to the select a custom class but did not work either. This is my code so far:

import { useContext, useEffect, useState } from 'react';
// styled components
import styled from 'styled-components';

// select input
import Select, { NonceProvider } from 'react-select';
import { Context } from '../../../Context/Context';

const FirstContext = ({ text, options, contextId, selected, value, index }) => {
  const [treeNodeNames, setTreeNodeNames] = useState([]);
  const [context, setContext] = useState();
  const { setContexts, setMandatoryContext } = useContext(Context);

  console.log('value first context', value);
  useEffect(() => {
    setContext(value);
  }, [value]);

  useEffect(() => {
    if (context) {
      setContexts((prev) => [
        ...prev.filter((el) => el.name !== text),
        context,
      ]);
    }
  }, [context]);

  useEffect(() => {
    if (index === 0 && context) {
      setMandatoryContext(context);
    }
  }, [context]);

  // console.log("clean - state",context)

  // clean one context when selected change
  useEffect(() => {
    if (treeNodeNames[0]) {
      console.log('Ordre marco', context);
    }
  }, [treeNodeNames, context]);

  useEffect(() => {
    setContext(undefined);
  }, [selected]);

  // const options = [
  //   { value: 'chocolate', label: 'Chocolate' },
  //   { value: 'strawberry', label: 'Strawberry' },
  //   { value: 'vanilla', label: 'Vanilla' },
  // ];

  // THIS IS FROM THE LIBRARY
  const customStyles = {
    option: (provided, state) => {
      // console.log("state", state);

      return {
        ...provided,
        borderBottom: '1px solid #f8f8f8',
        color: 'black',
        backgroundColor: 'white',
        '&:hover': {
          backgroundColor: '#f8f8f8',
          color: 'black',
        },
        menuPortal: (provided) => ({ ...provided, zIndex: 9999 }),
        menu: (provided) => ({ ...provided, zIndex: 9999 }),
        // textAlign: 'right',
      };
    },
    control: (styles) => ({
      ...styles,

      '&:hover': {
        border: '1px solid rgba(18, 18, 18, 0.3)',
        // border: 'none',
      },
      // border: 'none',
      border: '1px solid rgba(18, 18, 18, 0.1)',
      boxShadow: 'none',
      // textAlign: 'right',
      padding: '10px',
      borderRadius: '10px',
    }),
    singleValue: (provided, state) => {
      const opacity = state.isDisabled ? 0.5 : 1;
      const transition = 'opacity 300ms';

      return { ...provided, opacity, transition };
    },
    placeholder: (provided) => {
      return { ...provided };
      // return { position: 'absolute', right: 5 };
    },
    indicatorSeparator: (provided) => {
      return {
        indicatorSeparator: null,
      };
    },
    dropdownIndicator: (provided) => {
      return {
        ...provided,
        color: '#46AA8A',
        '&:hover': {
          color: 'rgba(20, 97, 101, 255)',
        },
      };
    },
    input: (provided) => {
      return {
        ...provided,
      };
    },
  };

  useEffect(() => {
    if (options) {
      const treeNodes = options.data.findTreeNodesByTree.map((element) => {
        return {
          name: text,
          value: element.name,
          label: element.name,
          id: element._id,
          selection: element._id,
          context: contextId,
          custom: null,
        };
      });

      setTreeNodeNames(treeNodes);
    }
  }, [options]);

  console.log('individual context', context);
  return (
    <ContextContainer>
      <ContextTitle>
        <p>{text}</p>
      </ContextTitle>
      {treeNodeNames && (
        <SearchInput>
          <Select
            onChange={
              index === 0 ? (e) => setMandatoryContext(e) : (e) => setContext(e)
            }
            placeholder="Select"
            value={value || context}
            options={treeNodeNames}
            styles={customStyles}
            isSearchable
            isClearable
          />
        </SearchInput>
      )}
    </ContextContainer>
  );
};

// STYLES
const ContextContainer = styled.div`
  display: flex;
  margin-left: auto;
  /* flex-direction: column; */
  align-items: center;
  justify-content: space-between;
  /* text-align: end; */
  /* border-bottom: 0.5px solid #d8d8d8; */
`;

const ContextTitle = styled.div`
  display: flex;
  /* width: 75%;  */
  align-items: center;
  justify-content: space-between;
`;
const SearchInput = styled.div`
  width: 30vw;
  padding: 10px 0px 10px 20px;
  outline: black;
  margin-right: 40px;
`;

export default FirstContext;

Answer 1

Try setting zIndex directly in menu rather nesting it inside option

const customStyles = {
    option: (provided, state) => {
      // console.log("state", state);

      return {
        ...provided,
        borderBottom: '1px solid #f8f8f8',
        color: 'black',
        backgroundColor: 'white',
        '&:hover': {
          backgroundColor: '#f8f8f8',
          color: 'black',
        }
      };
    },
    menu: (provided, state) => {
      return { 
        ...provided,
        zIndex: 9999
      }
    }