Проблема отображения информации пользователя в меню после успешного входа

[deniscikasov@gmail.com]

Проблема такая, что я вхожу в аккаунт, у меня сразу выдаёт ошибку что React не может правильно обработать некоторые данные или состояние в приложении
скриншот - https://skr.sh/sTo5xlrTBBI

обновляю страницу и пишет в консоли про сохранённый токен, но информации пользователя с его ником в Navbar всё так же нет
скриншот - https://skr.sh/sToEGA2y7KI


Ответ с сервера POST /users/login 200
Может кто нибудь подтолкнуть меня в правильном направлении, или может есть ссылка github приложения на redux toolkit и rtk query, где посмотреть можно функциональность.

Проблема такая,что в navbar никак не могу получить пользователя из userContext при успешном входе. Делаю проверку на пользователя и там null

Моя функция входа

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoadingButton(true);
    setErrorMessage("");

    // Проверка заполненности полей
    if (!email || !password) {
      setErrorMessage("Пожалуйста, заполните все поля.");
      setLoadingButton(false);
      return;
    }

    try {
      const data = { email, password };
      const response = await login(data).unwrap();
      console.log('Ответ от сервера:', response); // Проверка ответа
      dispatch(saveTokens({ accessToken: response.token, refreshToken: '', user: response.user }));
      toggleUserData(response.user); // Обновление состояния пользователя
      console.log('Данные пользователя:', response.user); // Проверка данных пользователя
    } catch (error: any) {
      console.error(error);
      setErrorMessage("Неправильный логин или пароль");
    } finally {
      setLoadingButton(false);
    }
  };

Вот мой navbar

const Navbar = () => {
  const {user} = useUserContext()
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <nav>
      {user ? (
        <h1>Добро пожаловать, {user.username}</h1>
      ) : (
        <button onClick={handleOpenModal}>Войти</button>
      )}
      <Modal open={isModalOpen} setOpen={setIsModalOpen}>
        <Login />
      </Modal>
      {/* Остальная часть навигационной панели */}
    </nav>
  );
};

export default Navbar;

Это мой userContext, может тут кто ошибку найдёт по совместимости с App.jsx, что будет ниже

import { User } from "./app/types"; // Импортируем тип User
import { createContext, useContext, useState } from "react";

// Определение интерфейса для контекста
interface UserContextType {
    user: User | null; // Данные пользователя
    setUser: React.Dispatch<React.SetStateAction<User | null>>; // Функция для установки пользователя
    toggleUserFlow: () => void; // Функция для переключения состояния пользовательского интерфейса
    isLogged: boolean; // Статус входа пользователя
    openUserFlow: boolean; // Статус открытия пользовательского интерфейса
    toggleUserData: (data: User | null) => void; // Функция для обновления данных пользователя
}

// Создание контекста
const UserContext = createContext<UserContextType | undefined>(undefined);

// Провайдер контекста
const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [user, setUser] = useState<User | null>(null); // Состояние пользователя
    const [isLogged, setIsLogged] = useState<boolean>(false); // Статус входа
    const [openUserFlow, setOpenUserFlow] = useState<boolean>(false); // Статус открытия пользовательского интерфейса

    // Функция для переключения состояния пользовательского интерфейса
    const toggleUserFlow = () => {
        setOpenUserFlow(prev => !prev);
    };

    // Функция для обновления данных пользователя
  const toggleUserData = (data: User | null) => {
    console.log('Обновление данных пользователя:', data); // Проверка данных
    if (data) {
        setUser(data);
        setIsLogged(true); // Устанавливаем статус входа
    } else {
        setUser(null);
        setIsLogged(false); // Устанавливаем статус входа
    }
};

    return (
        <UserContext.Provider value={{ user, setUser , toggleUserFlow, isLogged, openUserFlow, toggleUserData }}>
            {children}
        </UserContext.Provider>
    );
};

// Хук для использования контекста
const useUserContext = () => {
    const context = useContext(UserContext);
    if (context === undefined) {
        throw new Error("useUser Context must be used within a UserProvider");
    }
    return context;
};

export { UserProvider, useUserContext };

Сам App.jsx

import { BrowserRouter as Router } from "react-router-dom";
import { Suspense, lazy, useEffect, useState } from "react";
import "react-tooltip/dist/react-tooltip.css";
import "react-toastify/dist/ReactToastify.css";
import { UserProvider, useUserContext } from "./UserContext"; 

const Header = lazy(() => import("./components/header/index"));
const AppRoutes = lazy(() => import("./Routes"));

function App() {
  const [onlineUsers, setOnlineUsers] = useState(0);
  const [recentCaseOpenings, setRecentCaseOpenings] = useState([]);
  const [notification, setNotification] = useState();

  return (
    <UserProvider Provider> {/* Используйте UserProvider как компонент */}
      <Router>
        <Suspense fallback={<div>Loading...</div>}>
          <Header
          />
          <AppRoutes />
        </Suspense>
      </Router>
    </UserProvider>
  );
}

export default App;