How to use useState hook in Next.js SSR components?

Question

I have this simple counter:

import React, { useState } from "react";

export default function SSRComponent() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount((previousCount) => previousCount + 1);
  };

  return (
    <div>
      <h1>Server-Side Rendered Component</h1>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

And then this error occurs when trying to run the server:

./components/Header.tsx
ReactServerComponentsError:

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

   ,-[/home/dmytro/PhpstormProjects/prod/proudly-ukrainian/components/Header.tsx:1:1]
 1 | import React, { useState } from "react";
   :                 ^^^^^^^^
 2 | 
 3 | export default function SSRComponent() {
 4 |   const [count, setCount] = useState(0);
   `----

Maybe one of these should be marked as a client entry with "use client":
  ./components/Header.tsx
  ./app/layout.tsx

So how to use simple state in SSR components with Next.js?