How to navigate in nextjs without losing state of header component

Is there any way how to create/structure next.js app for navigation without losing header component state?

Let me explain.

I have header component like this:

import { useState } from "react"
import Link from 'next/link'

export const Header = () => {
  const [value, setValue] = useState(1)

  return (
    <header>
      HEADER
      <button onClick={() => setValue(value + 1)}>
        {value}
      </button>
      <ul>
        <li>
          <Link href="/">
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/test">
            <a>About Us</a>
          </Link>
        </li>
      </ul>
    </header>
  )
}

export default Header

There is a easy couter.

i have two pages. Index:

const Home = () => (
  <div className="container">
    <Header />
    <main>
      Index
    </main>
  </div>
)

Test:

import Head from 'next/head'
import Header from '../components/header'

const Home = () => (
  <div className="container">
    <Header />
    <main>
      Test
    </main>
  </div>
)

export default Home

I would like to navigate between this pages without losing state i header component. It is possible and how?