react-select: Impossible to get value onBlur event - reactjs

Question

I have a problem with the react-select lib (see here: https://www.npmjs.com/package/react-select). For the validation of my form, I display an error message on the onBlur event. The problem is that no value appears in my logs.
However, onChange works fine.
Handler
const handleBlur = (e: FocusEvent<HTMLInputElement, Element>) => {
//Here, When I select a value and deselect the input, no value exists in this log.
console.log("value Select: ", e.target.value )
}
The return of my component function
<Select
placeholder={`Select ${name}`}
name={name}
id={id}
onBlur={(e) => {
handleBlur(e)
}}
onChange={(e) => {
setValueOnChange(e, name)
}}
options={options}
styles={customStyle}
/>
Anyone have a suggestion?
Thanks !

Answer 1

import "./styles.css";
import Select from "react-select";
import { useState } from "react";
export default function App() {
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
];
const [value, setValue] = useState();
const [focusValue, setFocusValue] = useState();
const handleChange = (changeValue) => {
setValue(changeValue);
};
const handleFocus = (event) => {
const focusValue = event.target.value;
console.log("Should be focus value", focusValue);
setFocusValue(focusValue);
};
const handleBlur = (event) => {
const blurValue = event.target.value;
console.log("Should be blur value", blurValue);
if (focusValue !== blurValue) {
console.log("Do something");
}
};
return (
<div className="App">
<h1>React Select onFocus & onBlur </h1>
<Select
options={options}
value={value}
onChange={handleChange}
onFocus={handleFocus}
onBlur={handleBlur}
/>
</div>
);
}