Getting the newly selected option value with React Select - reactjs

Question

I have my select:
<Select
options={[
{ value: "1", label: "1" },
{ value: "2", label: "2" },
{ value: "3", label: "3" },
{ value: "4", label: "4" },
{ value: "5", label: "5" },
{ value: "6", label: "6" },
]}
name="mySelect"
ref={mySelect}
instanceId="mySelect"
defaultValue=""
onChange={() => getSelect(mySelect)}
/>
I have my function:
function getSelect(val) {
console.log(val.current.props.value["value"])
}
This logs the previous value, I understand why this happens but I can't think of another way to attempt this. Is there something similar to afterChange?

Answer 1

To get the current value, you should be using the value from the onChange instead. You don't need ref for this
<Select
options={[
{ value: "1", label: "1" },
{ value: "2", label: "2" },
{ value: "3", label: "3" },
{ value: "4", label: "4" },
{ value: "5", label: "5" },
{ value: "6", label: "6" },
]}
name="mySelect"
ref={mySelect}
instanceId="mySelect"
defaultValue=""
onChange={(value) => getSelect(value)}
/>
function getSelect(val) {
console.log(val)
}

Answer 2

It':
val.current.value
Not:
val.current.props.value
And since you are using ref so you don't need to send it throw parameter to handleChange function:
const mySelect = React.useRef(null);
function handleChange() {
if (mySelect.current) {
console.log(mySelect.current.value);
}
}
......
<Select
options={[
{ value: "1", label: "1" },
{ value: "2", label: "2" },
{ value: "3", label: "3" },
{ value: "4", label: "4" },
{ value: "5", label: "5" },
{ value: "6", label: "6" },
]}
name="mySelect"
ref={mySelect}
instanceId="mySelect"
defaultValue=""
onChange={handleChange}
/>