React Context API получает данные по умолчанию при изменении маршрутов в Next.js

_app.tsx:

'use client';
import type { AppProps } from 'next/app'
import  NavBar  from '@/Components/NavBar/NavBar';
import { NextUIProvider } from '@nextui-org/react'
import BlogState from '@/Context/blogState';
export default function App({ Component, pageProps }: AppProps) {
 
  return<BlogState> 
    <NextUIProvider>
  <div style = {{
    display:"flex",
    alignItems:"center",
    justifyContent:"center",
    fontSize:"50px",
    marginBottom:"30px"
  }}>Blog</div>
   <NavBar/>
   <Component {...pageProps} />
   </NextUIProvider>
   </BlogState>
}

blogState.tsx:

import BlogContext from "./blogContext";
import { useState, useEffect } from 'react';

const BlogState:any=(props:any)=>{
    
    const [Login,SetLogin]=useState(false)
    const [userDetail,setUserDetail]=useState({})

    function setLogin(val:boolean){
        SetLogin(()=>val)
    }
    function setUserDetails(val:any){
        setUserDetail((prev)=>prev=val)
    }
    useEffect(()=>{
      console.info(Login)
      console.info(userDetail)
    },[Login,userDetail])

    return (
        <BlogContext.Provider value = {{setUserDetails,setLogin,Login,userDetail}}>
            {props.children}
        </BlogContext.Provider>
    )
}

export default BlogState

Авторизоваться

 const [visible, setVisible] = useState(false)
  const [message,setMessage]=useState("")
  const {setUserDetails,setLogin}=useContext(blogContext)
  const[loading,setLoding]=useState(false)
  const[email,setEmail]=useState("")
  const[password,setPassword]=useState("")
  function LoginUser(){
    if (email= = ""||email==undefined||password= = ""||password==undefined){
      setMessage(()=>"Please fill all feilds")
      setVisible(()=>true)
      return;
    }
    setLoding(()=>true)
    axios.post("/api/Users/Login",
      {
        email:email,
        password:password
      }
    ).then((res:any)=>{
      if (res.data.details= = "No User Found"){
        setMessage(()=>"Email is not connected with any account")
        setVisible(()=>true)
        setLoding(()=>false)
         return;
      }
      if (res.data.details= = "Password Incorrect"){
        setMessage(()=>"Email or password incorrect")
        setVisible(()=>true)
        setLoding(()=>false)
         return;
      }
      setLoding(()=>false)
      setLogin(true)
      setUserDetails(res.data)
    }).catch(e=>console.info(e))
  }

Домашняя страница:

export default function Home() {
  const{Login}=useContext(blogContext)
  console.info(Login)
  return <div style = {{display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column"}}>
    <Quote title1='Conversation is king.' title2='Content is just something to talk about.'/>
   <div className = {classes.blogs}>
      <CardB/>
    <CardB/>
    <CardB/>
    <CardB/>
    <CardB/>
    </div>
  </div>
}

NavBAr

import { Navbar, Link, Text, Avatar, Dropdown, Input } from "@nextui-org/react";
import { Layout } from "./Layout";
export default function App() {
  const collapseItems = [
    "Home",
    "Create",
    "Favourite",
    "About",
  ];

  return (
    <Layout>
      <Navbar isBordered variant = "sticky">
        <Navbar.Toggle showIn = "xs" />
        <Text b>Bloging Made Easy</Text>
        <Navbar.Content
          enableCursorHighlight
          activeColor = "secondary"
          hideIn = "xs"
          variant = "highlight-rounded"
        >
          <Navbar.Link href = "/">Home</Navbar.Link>
          <Navbar.Link href = "/Create">Create</Navbar.Link>
          <Navbar.Link href = "/Favourite">Favourite</Navbar.Link>
          <Navbar.Link href = "#">About</Navbar.Link>
        </Navbar.Content>
        <Navbar.Content
          css = {{
            "@xs": {
              w: "12%",
              jc: "flex-end",
            },
          }}
        >
          <Dropdown placement = "bottom-right">
            <Navbar.Item>
              <Dropdown.Trigger>
                <Avatar
                  bordered
                  as = "button"
                  color = "secondary"
                  size = "md"
                  src = "https://media.istockphoto.com/id/1208175274/vector/avatar-vector-icon-simple-element-illustrationavatar-vector-icon-material-concept-vector.jpg?s=612x612&w=0&k=20&c=t4aK_TKnYaGQcPAC5Zyh46qqAtuoPcb-mjtQax3_9Xc = "
                />
              </Dropdown.Trigger>
            </Navbar.Item>
            <Dropdown.Menu
              aria-label = "User menu actions"
              color = "secondary"
              onAction = {(actionKey) => console.info({ actionKey })}
            >
              <Dropdown.Item key = "profile" css = {{ height: "$18" }}>
                <Text b color = "inherit" css = {{ d: "flex" }}>
                  Signed in as
                </Text>
                <Text b color = "inherit" css = {{ d: "flex" }}>
                  [email protected]
                </Text>
              </Dropdown.Item>
              <Dropdown.Item key = "settings" withDivider>
                <Link href = "/Account">Account</Link>
              </Dropdown.Item>
              <Dropdown.Item key = "logout" withDivider color = "error">
                Log Out
              </Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        </Navbar.Content>
        <Navbar.Collapse>
          {collapseItems.map((item, index) => (
            <Navbar.CollapseItem
              key = {item}
              activeColor = "secondary"
              css = {{
                color: index === collapseItems.length - 1 ? "$error" : "",
              }}
              isActive = {index === 2}
            >
              <Link
                color = "inherit"
                css = {{
                  minWidth: "100%",
                }}
                href = {(item=='Home')?"/":`/${item}`}
              >
                {item}
              </Link>
            </Navbar.CollapseItem>
          ))}
        </Navbar.Collapse>
      </Navbar>
    </Layout>
  );
}

Я пытался использовать контекстный API, но значения получают значение по умолчанию всякий раз, когда я перехожу к другому компоненту, хотя все приложение заключено в контекст.

useEffect запускается и регистрирует состояние входа в систему и userData, который отлично работает и обновляет данные, но когда он переходит на другой маршрут, обновленные данные исчезают.

Ссылка на видео, показывающее проблему.