useState one behind the rendered element - reactjs

Question

import React, { useState } from "react";
import { Form } from "react-bootstrap";
import geneList from '../data/SampleSheet.json';
import C3 from 'c3'
import C3Chart from 'c3';
import 'c3/c3.css';
const GENEDATA = [["Gnai3",501, 747, 705, 543, 689], ["genen",3,3,3,3],["Cdc45",22, 30 ,10 ,28, 29]] as [string, ...number[]][];
const GENENAMES = ["Gnai3", "genen", "Cdc45"];
export function Genes(): JSX.Element {
// This is the State (Model)
const [gene, setGene] = useState<([string, ...number[]])>(GENEDATA[0]);
const [geneName, setGeneName] = useState<string>(GENENAMES[0]);
// This is the Control
//no idea why the gene name is one behind but maybe you can figure it out
function updateGene(event: React.ChangeEvent<HTMLSelectElement>) {
setGeneName(event.target.value);
const tempGene = gene;
const changeData = GENEDATA.find((name: [string, ...number[]]): boolean => name[0] === geneName);
if(changeData === undefined){
setGene(tempGene);
alert("Gene not found!");
}
else{
alert(geneName);
setGene(changeData);
}
}
// eslint-disable-next-line #typescript-eslint/no-unused-vars
var chart = C3.generate({
bindto: '#chart',
data: {
columns: [
gene
]
},
axis: {
y: {
label:"Activation Level"
}
},
color: {
pattern: ['#ff7f0e']
},
});
// This is the View
return (
<div>
<Form.Group controlId="Genes">
<Form.Label>Pick gene to display: </Form.Label>
<Form.Select value={geneName} onChange={updateGene}>
{ GENENAMES.map((geneName: string) =>
<option key={geneName} value={geneName}>{geneName}</option>
)}
</Form.Select>
<div id="chart"></div>
</Form.Group>
Selected Gene: {geneName}
</div>
);
}
Im trying to graph some data using the C3 library and the data used in the graph should be synced up with the current geneName, however, it seems that when my page re-renders, the geneName seems to be one ahead of the gene state and I am not sure why.
I thought that maybe it was because state update was being done in on function all together so that the useState wasnt set to the correct value yet which is true. I need my graph data to reflect the current geneName and its data.

Answer 1

I actually figured it out right after creating this post.
It was because i was setting my data name and its respective data equal to the current geneName state. Because the state doesnt change until after the render, it was getting the actual current state which is not what I wanted.
The fix was simply setting the gene to event.target.value insted of geneName
The fix was in my .find