Auto selected of value from options in react-select react - reactjs

Question

Problem Statement :
I am using react-select 2.4.1 for the Select dropdown.
I want to auto select the value from options array based on some condition, and that auto selected value should also get updated in the component state or vice versa.
How can I achieve that?
I have tried multiple ways, please help.
Thanks in advance.
Below is my code for the Select dropdown.
<Select
options={props.mercModeOptions}
onChange={(evt) => setSelectedMercMode(evt.value)}
selected={props.mercModeDefaultOpt}
/>
Below is the options array:
props.mercModeOptions = [
{
value: "first",
label: "first"
},
{
value: "second",
label: "second"
},
{
value: "third",
label: "third"
}
]
Value to be auto selected:
props.mercModeDefaultOpt = {
value: "third",
label: "third"
};

Answer 1

I have added sample codesandBox to achieve this.
We can store the default value in a variable using the useMemo hook and update the local state.
import Select from "react-select";
import { useEffect, useMemo, useState } from "react";
const dropDowonData = [
{ value: "first", label: "first" },
{ value: "second", label: "second" },
{ value: "third", label: "third" }
];
export default function App() {
const [selectedValue, setSelectedValue] = useState();
// This will run for only during the first render.
const defaultSelectedValue = useMemo(() => {
// to update the local state
setSelectedValue(dropDowonData[0]);
return dropDowonData[0];
}, []);
console.log(selectedValue);
return (
<div className="App">
<Select
defaultValue={defaultSelectedValue}
value={selectedValue}
onChange={(value) => setSelectedValue(value)}
name="Select"
options={dropDowonData}
/>
</div>
);
}