ログイン/ログアウトの切替をNext.js 13で実施する方法について

実現したいこと

Next.js 13でログイン/ログアウトの切替を以下の手順で行いたい。

➀ App/page.tsxで状態変数をbooleanで定義
➁ ➀をpropsとしてNavBar.tsx → login/page.tsx, logout/page.tsxの順に渡す
➂ login/page.tsx, logout/page.tsxにて、更新関数で真偽値を反転
➃ NavBar.tsxにて、ログイン時はLOGOUTを、ログアウト時はLOGINを表示させる

前提

■ 現在のディレクトリ構成(App Routerを使用)

// 構成図
App/
├─ components/
│   └─ NavBar.tsx
├─ data
│  └─ FireBase.ts
├─ pages
│    ├─ createpost
│    │  └─ page.tsx
│    ├─ login
│    │  └─ page.tsx
│    └─ logout
│       └─ page.tsx
├─ styles
├─ layout.tsx
└─ page.tsx

質問

ナビゲーションバーにおいて、ログイン時はLOGOUTが、
ログアウト時はLOGINが表示される状態を作りたい。

発生している問題・エラーメッセージ

Next.jsのLinkを使用する場合、NavBar.tsxからlogin/page.tsxに変数をpropsとして渡すことができず、どのように変数を更新すれば良いかが分からずにいます。

該当のソースコード

typescript
1// App/page.tsx
2const App = () => {
3// isAuthで状態変数としてログイン情報を保持し、propsで渡したい
4// const [isAuth, setIsAuth] = useState(false);
5  return (
6    <div className="app">
7      <style jsx>{styles}</style>
8      <NavBar />
9    </div>
10  );
11};
12
13export default App;

typescript
1// NavBar.tsx
2interface isAuthProps {
3  isAuth: boolean;
4}
5
6const NavBar = () => {
7  const [isAuth, setIsAuth] = useState(false);
8
9　// だが、受け取ったpropsをloginとlogoutに受け流すことができない
10　// コンポーネントを記載できないため
11  return (
12    <>
13      <style jsx>{styles}</style>
14      <nav className='app-nav'>
15        <Link href='/pages/home ' className='app-nav-item'>
16          <FontAwesomeIcon color='#fff' icon={faHouse} />
17          <p className='app-nav-item-text'>HOME</p>
18        </Link>
19        <Link href='/pages/createpost' className='app-nav-item'>
20          <FontAwesomeIcon color='#fff' icon={faFilePen} />
21          <p className='app-nav-item-text'>POST</p>
22        </Link>
23        {!isAuth ? (
24          <Link href='/pages/login' className='app-nav-item'>
25            <FontAwesomeIcon color='#fff' icon={faArrowRightToBracket} />
26            <p className='app-nav-item-text'>LOGIN</p>
27          </Link>
28        ) : (
29          <Link href='/pages/logout' className='app-nav-item'>
30            <FontAwesomeIcon color='#fff' icon={faArrowRightToBracket} />
31            <p className='app-nav-item-text'>LOGOUT</p>
32          </Link>
33        )}
34      </nav>
35    </>
36  );
37};
38
39export default NavBar;