React Checkbox Form State is Delayed - reactjs

Question

I have a form I am mapping a list of checkbox inputs to using React. The mapping function receives a list of JSON objects and maps them to inputs as follows:
const listCustomBenefits = props.customBenefits.map(benefit => {
return(
<div className="flex">
<input onChange={props.handleCustomBenefitsChange} id={benefit.id} key={benefit.id}
className="my-auto" type="checkbox" checked={benefit.included}></input>
<p className="my-auto px-2">{benefit.benefit}</p>
</div>
)
})
props.customBenefit is formatted as followed:
const customBenefit = useState([
{
benefit: "first benefit description",
id: 1,
included: false,
name: "First Benefit",
},
{
benefit: "second benefit description",
id: 2,
included: false,
name: "Second Benefit",
},
]);
listCustomBenefits is then returned in the component's return JSX. When a checkbox is clicked, handleCustomBenefitsChange updates the state of custom benefits as follows:
const handleCustomBenefitsChange = (event) =>{
event.preventDefault()
const newCustomBenefits = customBenefits.map(benefit =>{
if(benefit.id == event.target.id){
const newCheck = [event.target.checked][0]
return({...benefit, included: newCheck})
}
else{
return benefit
}
})
setCustomBenefits(newCustomBenefits)
}
The function properly updates the state of customBenefits, but the checkbox display is always one event behind (i.e. you have to click the checkbox twice to see the desired change).
I have tried setting state with props on the local component as well (instead of using props directly) but can't seem to get the component to update on the initial click. Can anyone help me resolve this?

Answer 1

I didn't dig into exactly why, but I think it's something to do with the newCheck being out of date. Instead of relying on the dom state we can just flip benefit.included and pass around the id instead of grabbing it from the event target.
So our checkbox would look like this
<input
onChange={() => handleCustomBenefitsChange(benefit.id)}
...
/>
and our handler changes to accept the ID instead of the event, and makes the change based off of it's own state rather than the dom
const handleCustomBenefitsChange = id => {
const newCustomBenefits = customBenefits.map(benefit => {
if(benefit.id == id){
return({...benefit, included: !benefit.included})
} else {
return benefit;
}
});
setCustomBenefits(newCustomBenefits);
};