How to hide InputContainer when select isn't focused?

[TNSaturday]

I'm facing the following problem when dealing with react-select multi select:

Basically, it renders an additional div inside which an actual input element resides. What I want to do is to hide it when select itself is not in the focused state.

I tried different things, but none of them worked:

1. First of all, I tried setting isHidden to true on the Input component itself:

import { useState } from "react";
import { components } from 'react-select';

export const Input = (props) => {
  const [isHidden, setIsHidden] = useState(true);
  const showInput = () => { setIsHidden(false) };
  const hideInput = () => { setIsHidden(true) };

  return <components.Input {...props} isHidden={isHidden} onFocus={showInput} onBlur={hideInput} />
}

It doesn't work, since it's only hides the blinking cursor and not the actual input-container div which is what is needed.

2. Then I tried to style the InputContainer, but React Select doesn't expose it as a separate component, thus it's not possible to pass it any styles.
3. Finally, I tried to get reference to it by passing a ref to the Input component and then doing something like

import { useRef} from "react";
import { components } from 'react-select';

export const Input = (props) => {
  const inputRef = useRef(null);
  const hideParent = () => {
    cons inputContainer = ref.current.parentElement;
    // modify DOM somehow
  };

  return <components.Input {...props} ref={inputRef} />
}

It also doesn't work, since it's not a forwardRef component and can't be passed a ref. So, taking into account all the above, how do I hide this input container?