我试图将某种类型的 * 服务 * 共享给嵌套在另一个组件中的组件，但我得到了一个未定义的错误。
“UserContext”未定义（未定义）
这是我的App.js：

import logo from './logo.svg';
import './App.css';
import React, {createContext} from "react";
import {
    BrowserRouter as Router,
    Routes,
    Route
} from "react-router-dom";
import TopPanel from "./components/topPanel/TopPanel";
import UserCtx from "./services/UserCtx";

function App() {

    const UserContext = createContext({});

    return (
        <Router>
            <UserContext.Provider value={new UserCtx()}>
                <TopPanel/>
            </UserContext.Provider>
            <Routes>
                ...
            </Routes>
        </Router>
    );
}

export default App;

在TopPanel组件内部，有一个Login组件，它应该使用上下文：

import React, {useState, useContext} from "react";

function Login() {

    const userCtx = useContext(UserContext);

    ...
}

export default Login;

但是它显然没有被传递。请问我做错了什么？它甚至看起来都没有传递给第一级组件。
不要认为它是相关的，但这里是上下文对象：

import React from "react";

class UserCtx {

    isLoggedIn;
    token;

    constructor() {
        this.isLoggedIn = false;
    }

    logIn = (token) => {
       console.log("LOGGING IN!");
       this.isLoggedIn = true;
       this.token = token;
    }
}

export default UserCtx;