我有一个Settings组件，它处理切换亮/暗模式。但是，在导航到另一个组件时，黑暗模式的状态不会持续（它返回到明亮模式）。
我尝试做的是通过使用状态管理解决方案React Context在所有组件之间共享状态，而不需要额外的库。
这是我下面得到的错误，我不知道如何修复它。我试过很多方法。任何建议将不胜感激。

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>
    );
};