React Contex Doesn't Update

Question

Im writting an app that needs to use context. I spent 4 hours trying to figure it out yet the context still doesnt update in a child component. I would be glad for a tip on how to fix it. Thank you

AuthProvider.js

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

const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState("Default");

  return (
    <AuthContext.Provider value={{ auth, setAuth }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

I used custom hook to make code cleaner for setting context.

useAuth.js

import React from "react";
import { useContext } from "react";
import AuthContext from "../context/AuthProvider";

const useAuth = () => {
  return useContext(AuthContext);
};

export default useAuth;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { AuthProvider } from "./context/AuthProvider";
import App from "./App";

ReactDOM.createRoot(document.querySelector("#root")).render(
  <BrowserRouter>
    <AuthProvider>
      <Routes>
        <Route path="/*" element={<App />} />
      </Routes>
    </AuthProvider>
  </BrowserRouter>
);

I want to update context in the App.js file, but I can only print it.

App.js

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import RequireAuth from "./RequireAuth";
import useAuth from "./hooks/useAuth";

const ROLES = {
  Student: 1000,
  Teacher: 2000,
};

const App = () => {
  const { auth, setAuth } = useAuth();
  setAuth("changed"); // This doesnt change anything
  console.log(auth); // It still prints the default value
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
      </Route>
    </Routes>
  );
};

export default App;