const [horizontal, setHorizontal] = useState(10);
const [vertical, setVertical] = useState(10);
const [blur, setBlur] = useState(10);
const [spread, setSpread] = useState(10);
const [color, setColor] = useState('#000000');
const [checked, setChecked] = useState(false);

const onChangeHandler = (setFunction,event) => {
    if (setFunction === setChecked) {
        setFunction((prevVal) => !prevVal);
    }
    else {
        setFunction(event.target.value);
    }
    props.valuesInputHandler({
        horizontal,
        vertical,
        blur,
        spread,
        color,
        checked
    });
};


<input type="checkbox" checked={checked} onChange={onChangeHandler.bind(this,setChecked)} />

The onChangeHandler function runs when there is any change in the input field. Now suppose I clicked on a checkbox, the onChangeHandler will run. Since I passed setChecked function as the parameter, the setChecked function will turn te false value to true. After that this value will be passed to the parent component through props function. But the problem is when I click on the checkbox, the checked state gets updated, but before getting updated, the value of checked is already passes. So if becomes true, the parent component will still have the previous false value. And when I reclick checkbox, it becomes false, but the parent component gets the previous true value this time. It is causing one step delay. How can I pass the updated state value??