Why did the onChange handler delay the local state update in the ToggleButtonsGroup mui component?

I have a problem with the ToggleButtonGroup component of the material-ui library, precisely in the onChange handler. At the beginning my code was more complex, I eliminated the problems one by one until I got this piece of code. But I can't understand the behavior of this code.

export default function ToggleButtons() {
    
    // setting local state
    const [values, setValues] = useState(()=>[]);

    // toggle buttons handler
    const onChangeHandler =(event: any,newValues: string[]) => {
        setValues(newValues);
        console.log('newValues',newValues);
        console.log('state values',values);
      };

    
    return (
        <ToggleButtonGroup
            value={values}
            onChange={onChangeHandler}
        >
            <ToggleButton value='first' >first</ToggleButton>
            <ToggleButton value='second' >second</ToggleButton>
            <ToggleButton value='third' >third</ToggleButton>
        </ToggleButtonGroup>
    );
}

Visually everything is perfect. But inside there is something that intrigues me.

But please check my console##

• First button is checked

• First button is unchecked

• Second button is checked then the third

It seems that the local state is always delayed. Did I write something wrong? If not then where is the problem?

React updates state asynchronously, so your console.log is printing stale data.

If you use React dev tools to see your state, it's working correctly:

try to make useState statement exactly as in documentation.
https://mui.com/material-ui/react-toggle-button/

take a look =>
you did :
const [values, setValues] = useState(()=>[])
they did:

 const [alignment, setAlignment] = React.useState<string | null>('left');

why do you use array instead of just simple string?
look at their implementation:

import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
export default function ToggleButtons() {
const [alignment, setAlignment] = React.useState<string | null>('left');
const handleAlignment = (
event: React.MouseEvent<HTMLElement>,
newAlignment: string | null,
) => {
setAlignment(newAlignment);
};
return (
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled>
<FormatAlignJustifyIcon />
</ToggleButton>
</ToggleButtonGroup>
);
}