react-select default value did not work with props

As in the title. I have been used the react-select component and I pass props to it as the default value. but it did not show. why did this happen? even when I pass string to it like this defaultValue="aa"

this is the sandbox for my code:
enter link description here

The defaultValue should be the Option type, see StateManager Props

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

// it should be
<SelectItemComp b={options[0]} options={options} />

// not
<SelectItemComp b='chocolate' options={options} />

codesandbox

You can find the official example home#getting-started

 import React, { useState } from "react";
 import Select from "react-select";

  const SelectItemComp = (props) => {
   const { b, options } = props;
   console.log(props);
   
 
   const [selectedItem, setSelectedItem] = useState(b);
   console.log(selectedItem);
 
 
 
   const handleChange = (e) => {
     const selectedItem = e.value;
     setSelectedItem(selectedItem);
     console.log("default", selectedItem);
   };
 
   return (
     <div>
       <Select onChange={handleChange} options={options}  placeholder={selectedItem} />
     </div>
   );
 };
 
 export default SelectItemComp;

codesandbox react-select

Please Check the sandbox. I've made some changes might help you.

import SelectItemComp from "./SelectItemComp";
import "./styles.css";

export default function App() {
  const options = [
    { id: 0, value: "default", label: "Select an option" },
    { id: 1, value: "chocolate", label: "Chocolate" },
    { id: 2, value: "strawberry", label: "Strawberry" },
    { id: 3, value: "vanilla", label: "Vanilla" }
  ];

  return (
    <div className="App">
      <SelectItemComp options={options} />
    </div>
  );
}

import React, { useState } from "react";
import Select from "react-select";

const SelectItemComp = (props) => {
  const { options } = props;
  const [selectedItem, setSelectedItem] = useState(options[0]);

  const handleChange = (e) => {
    const selectedItem = e.value;
    setSelectedItem(selectedItem);
  };

  console.log("default", selectedItem);

  return (
    <Select
      defaultValue={options[0]}
      onChange={handleChange}
      options={options}
    />
  );
};

// This might help you if you don't pass any options as props to SelectItemComp
// Happy coding
SelectItemComp.defaultProps = {
  options: [{ id: 0, value: "default", label: "Select an option" }]
};

export default SelectItemComp;

You need to include default value in the options array. You don't have to passe it separately as a prop. and for simplicity i added default props if you forgot to pass options props as param to SelectItemComp component .