Considere este código (vea los comentarios):

 import React, { useState } from "react"; import Select from "react-select"; import "./styles.css"; export default function App() { const [value, setValue] = useState(); const options = [ { label: "first option", value: 1 }, { label: "second option", value: 2 }, { label: "third option", value: 3 } ]; // destructuring the object to get 'value' property // (the passed object looks like { label, value } ) const onSelect = ({value}) => { // here the 'value' variable is being set console.debug("selected value:", value ) setValue(value); }; // destructuring event object to get 'target' property const onBlurValue = ({target}) => { console.log("onBlur target value:", target.value); // the value is not updated yet, so it holds the previously set value console.log("onBlur value:", value || "undefined"); }; return ( <div> Current value is: {value || "undefined" } <Select // the value prop does nothing here // value={options.label} options={options} onChange={onSelect} blurInputOnSelect onBlur={onBlurValue} /> </div> ); }

Como dijo @a.mola: el setValue es asíncrono y la variable de value aún no se actualiza cuando se activa el evento onBlur , por lo que mantiene el valor establecido previamente.

No estoy seguro de qué está tratando de lograr dentro del evento onBlur , puede que no sea el lugar adecuado para hacerlo.

Si necesita generar el value de alguna manera, puede hacerlo dentro de la parte de return (como se hace en el código anterior).

Si necesita validar el value o hacer algo en función de su valor recién seleccionado, puede hacerlo dentro de la función onSelect .

Puede agregar una variable de instancia para almacenar el valor seleccionado (tal vez no sea la mejor solución, pero debería funcionar)

 export default function App() { const [value, setValue] = useState(); const valueRef = useRef(); const onSelect = value => { valueRef.current = value; setValue(value); }; const onBlurValue = () => { console.log(valueRef.current); }; return ( <div> <Select value={value} options={options} onChange={onSelect} blurInputOnSelect onBlur={onBlurValue} /> </div> ); }

El problema con esta solución es que almacena el valor seleccionado en dos lugares (la variable de estado y la variable de instancia de referencia).

La pregunta es, ¿por qué necesita obtener el valor seleccionado dentro del controlador onBlur? El controlador onChange podría ser suficiente en su caso, ¿no es así?

Eso podría ser un problema con React de esa versión, o un conflicto entre react-select y esa versión específica de react

Intente actualizar tanto react como react-dom a la última versión (17.0.2) y react-select a 4.3.1 para resolver el problema.

Ejemplo de trabajo: