How can I test custom component depended on logic from react-select component inside child custom component?

[ggustav1]

I have a custom made component in my React app, that I would like to unit test.

The component that I would like to test consist of a custom text input component and a custom select component, containing a react-select component. The text input field is only showed to the user, if the user selects option "b" in the react-select component.

Which means the logic in the parent component is basically something like this:

select option = ["a", "b"]

if selectedOption === "b" display text input field

Parent component:

const CustomParentComponent = () => {

  const [showTextInputField, setShowTextInputField] = useState(false);

  const [selectOptions, setSelectOptions] = useState(
    [
      {
        'value': 'a',
        'label': 'a'
      },
      {
        'value': 'b',
        'label': 'b'
      }
    ]
  );

  const selectOnChange = ({ selectedOption }) => {
    if (selectedOption === 'b') setShowTextInputField(true);
  };

  return (
    <>
      <CustomSelectComponnet options={selectOptions} onChangeOut={selectOnChange}></CustomSelectComponnet>

      {
        showTextInputField && <div>
          <CustomTextInputField />
        </div>
      }

    </>
  );
};

Custom select component containing react-select:

import Select from 'react-select';

const CustomSelectComponnet = ({ options, onChangeOut }) => {


  return (
    <>
      <Select
        onChange={(selectedOption) => onChangeOut(selectedOption)}
        options={options}
      />
    </>
  );
};

My problem is I cannot find any documentation on how to 1) add a data-testid to the react-select inside my CustomSelectComponnet and 2) How to mock a user event in my unit test that selects options "b", in order for me to test if the input field is to be found in the document.

Any help?