Debug in browser but React is not defined

I am trying to use Context to store login user name and use for protected routes.

context.js

import React from 'react';
const axios = require('axios');

export const AuthContext = React.createContext(null);
export const AuthProvider = ({ children }) => {
    const [username, setUsername] = React.useState(null);
    const handleLogin = async () => {
        const response = await axios.get('/loginuser');

        setUsername(response.username);
    };

    const handleLogout = () => {
        setUsername(null);
    };

    const value = {
        username,
        onLogin: handleLogin,
        onLogout: handleLogout,
    };

    return (
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    );
};
export const useAuth = () => {
  return React.useContext(AuthContext);
};

export default {AuthContext, AuthProvider, useAuth};

ProtectedRoute.js

import React from 'react';
import { useAuth } from "./context";
import { Outlet } from 'react-router-dom';

const ProtectedRoute = () => {

    const { username } = useAuth();
    if (!username) {
        return null;
    }

    return <Outlet />;
};

export default ProtectedRoute;

App page MainPage.js

...
function MainPage() {
    return (
        <Router>
            <AuthProvider>
                <Routes>
                    <Route exact path="/login" element={<LoginPage />} />
                    <Route exact path="/" element={<Main />} />
                    <Route exact path="/home" element={<ProtectedRoute />} >
                        <Route exact path="/home/show" element={<ShowPage />} />
                        ...
                    </Route>
                </Routes>
            </AuthProvider>
        </Router>
    );
}
...

Dependencies in package.json

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "moment": "^2.29.4",
    "qrcode.react": "^3.1.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.4.0",
    "react-datepicker": "^4.8.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  }

And when I debug in browser, every thing is Undefined. I have tried in Firefox 91.4.0esr (64-bit), Chrome 104.0.5112.101

When I call useAuth(), React is undefined but AuthContext have initialized.

Then I can not get username in the context.

I have no idea what is going wrong there. Is there anyone can explain this?