When I use useMediaQuery from Material UI in my React app in the top level component (App) of my app, the query doesn’t work (value doesn’t update on window resize) and causes rendering issues (when using Chrome’s dev tools mobile screen emulators). But if I move the query in to a child component (AppContainer), it works. Is it because the containing component needs to have some kind of size attributes?
Here is my top level component with the query:

import Authentication from "./components/Authentication";
import AppContainer from "./components/AppContainer";
import {useState} from "react";
import {AuthContext} from "./contexts/AuthContext";
import {ScreenContext} from "./contexts/ScreenContext";
import useMediaQuery from "@mui/material/useMediaQuery";

function App() {

    const [isLoggedIn, setIsLoggedIn] = useState(true);
    const [user, setUser] = useState(null);
    const isWideScreen = useMediaQuery('(min-width: 500px)', {noSsr: true});

    return (
        <AuthContext.Provider value={{ isLoggedIn , user }}>
        <ScreenContext.Provider value={{ isWideScreen }}>
            <>
                {isLoggedIn ? <AppContainer/> : <Authentication/>}
            </>
        </ScreenContext.Provider>
        </AuthContext.Provider>
    );

}

export default App;