проблема отображения информации пользователя в navbar. React/redux-toolkit/rtk query
 

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

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

мой Navbar

const Navbar: React.FC<NavbarProps> = ({ openSidebar, setOpenSidebar }) => {
  const [isHovering, setIsHovering] = useState<boolean>(false);
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false); 

  const user = useSelector(selectUser); // Получаем данные пользователя из состояния
  const isLogged = !!user; 
console.log("selectUser:",selectUser)
console.log("Данные пользователя из selectUser:", user);
  return (
                     {isLogged ? `Привет, ${user.username}` : (
                        <button onClick={() => setIsModalOpen(true)}>Войти</button>
                      )}
            )

Данные в console.log("Данные пользователя из selectUser:", user); приходят правильные. А ошибка остаётся


мой 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 } 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> {/* Исправлено использование UserProvider */}
      <Router>
        <Suspense fallback={<div>Loading...</div>}>
          <Header />
          <AppRoutes />
        </Suspense>
      </Router>
    </UserProvider>
  );
}

export default App;

Мой UserContext =============================

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

Почти разобрался