I'm having trouble with the Material UI toggle switch I'm using in my current project. When the component loads, if I log the value in the console, the initial value is correct. However, if I click the switch from "Yes" to "No", the switch correctly renders showing "No" is selected and the console logging fires again, but the value still shows "Yes". If I click the switch again and try to toggle it back to "No", the toggle just re-renders without flipping, the console logging fires again and the value is now updated to "No".So basically the first click flips the switch and the second click flips the value. I've used the same toggle switch before with no issues, so can anyone tell me what I need to fix to get the switch and value to flip when clicked?

Handling input changes:

const handleInputChange = e => { const { name, value } = e.target; setValues({ ...values, [name]: ( typeof value === 'string' ? (value).replace(/ (?= )/g, '').trimStart() : value ) // If the value is a string, remove leading spaces and multiple spaces }); };

Switch called from form:

ToggleSwitch component:

import * as React from 'react'; import {Box, Switch, Typography} from '@material-ui/core'; export default function ToggleSwitch(props) { const { label1, label2, name, onChange, value} = props; const [checked, setChecked] = React.useState(false); const convertToEventParams = (name, value) => ({ target: { name, value } }); const curValue = value === 1 ? true : false; const handleSwitch = e => { setChecked(e.target.checked); }; React.useEffect(() => { setChecked(curValue); }, [curValue]); // Re-render the toggle switch every time the checked value changes const handleChecked = e => { handleSwitch(e); onChange(convertToEventParams(name, (checked === false ? 1 : 0))); // Convert True/False to 1/0 value }; return (   {label1} {} {label2}   ); }