With document.getElementById('pro1').collapsed you're setting the property on the actual rendered DOM Node and not the React Node.

You can instead try the following

export default function MaterialLayout(props) {
 const { children } = props;
 const classes = useStyle();

 const [ sideCollapsed, setSideCollapsed ] = useState(false);
 const toggleSideCollapsed = useCallback(() => {
   console.log('toggle')
   setSideCollapsed(collapsed => !collapsed)
 }, [ setSideCollapsed ]) // could leave this empty
 
 return (
   <ThemeProvider theme={theme}>
     <CssBaseline />
     <Header />
     <ProSidebar onClick={toggleSideCollapsed} collapsed={sideCollapsed}>
....
....

However I'm not sure whether or not ProSidebar takes an onClick property. You can verify that using the console.log statement and checking your console.

For more explanation you can look into the React docs on useState and useCallback or just ask in the comments :)

Could you please try out this code and let me know if it works?

export default function MaterialLayout(props) {
    const { children } = props;
    const classes = useStyle();
    const [toggled, setToggled] = useState(false);
    const [collapsed, setCollapsed] = useState(true);
    const handleToggle = () => {
        setToggled(!toggled);
        setCollapsed(!collapsed);
    }

    return (
        <ThemeProvider theme={theme}>
        <CssBaseline /><Header />
        <ProSidebar collapsed={collapsed} toggled={toggled} onToggle={handleToggle}>
        ...rest of content...
    )
}