Why am I getting error when trying to wrap my main component with another component that handles state?

I have a Settings component which handles toggling light/dark mode. However, upon navigating to another component, the state of the dark mode doesn't persist (it goes back to light mode).

What I'm trying to do is share the state across all components without the need for additional libraries by using the state management solution React Context.

This is the error I'm getting below and I'm not sure how to fix it. I've tried so many ways. Any suggestions would be appreciated.

Warning: A context consumer was rendered with multiple children, or a child that isn't a function. A context consumer expects a single child that is a function. If you did pass a function, make sure there is no trailing or leading whitespace around it.

App.js

const App = () => {
    return (
        <>
         <DarkModeContext.Consumer>
            <Router>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <ProtectedRoute path="/settings" component={Settings} />
                </Switch>
            </Router>
         </DarkModeContext.Consumer>
        </>
    );
}

const container = document.getElementById('example');
const root = createRoot(container);
root.render(<UserProvider><App/></UserProvider>);

Settings.js

import React, { useContext, useEffect } from 'react';
import Switch from '@mui/material/Switch';
import { FormControlLabel, Grid } from '@mui/material';
import {DarkModeContext} from "../../utilities/DarkModeContext";

const Settings = () => {
    const { darkModeChecked, toggleDarkMode } = useContext(DarkModeContext);

    useEffect(() => {
        document.body.style.backgroundColor = darkModeChecked ? 'black' : 'white';
    }, [darkModeChecked]);

    return (
        <Grid container direction="column" alignItems="center" justifyContent="center" spacing={2}>
            <Grid item>
                <FormControlLabel
                    control={<Switch checked={darkModeChecked} onChange={toggleDarkMode} />}
                    label="Text to the top"
                    labelPlacement="top"
                />
            </Grid>
        </Grid>
    );
};

export default Settings;

DarkModeContext.js

import React, { createContext, useState } from 'react';

export const DarkModeContext = createContext();

export const DarkModeProvider = ({ children }) => {
    const [darkModeChecked, setDarkModeChecked] = useState(true);

    const toggleDarkMode = () => {
        setDarkModeChecked((prev) => !prev);
    };

    return (
        <DarkModeContext.Provider value={{ darkModeChecked, toggleDarkMode }}>
            {children}
        </DarkModeContext.Provider>
    );
};

This is not the right way of using Context.Consumer. The warning tells you what the problem is. It expects function that return ReactElement.

<Context.Consumer>{(thingsFromContextValue) => <Component />}</Context.Consumer>

The way you using it does not make sense. It is there to give the return value, if you are not using that value, no need to use the Consumer.

Also I don't see where you use your DarkModeProvider. It has to wrap those that use that context