Getting Unhandled Runtime Error, Error: "undefined" is not valid JSON in when importing Client component to server component

I have trying to implement a simple counter component that will increase the count of the state variable when a button is clicked, so i made a separate file Couter.tsx and placed into the component folder in the root of the next project. Here is the code for the Counter.tsx file -

"use client";

import { useState } from "react";

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

But when i import this component into the main page.tsx file, I get this strange error -

Unhandled Runtime Error
Error: "undefined" is not valid JSON

Call Stack
React
updateDehydratedSuspenseComponent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (16088:0)
updateSuspenseComponent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (15788:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (17103:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25615:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24465:0)
workLoopSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24181:0)
renderRootSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24146:0)
performConcurrentWorkOnRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23250:0)
workLoop
node_modules\next\dist\compiled\scheduler\index.js (10:3921)
flushWork
node_modules\next\dist\compiled\scheduler\index.js (10:3629)
MessagePort.performWorkUntilDeadline
node_modules\next\dist\compiled\scheduler\index.js (10:1811)

What did I do wrong here? I have been trying to find a solution for a few hours.

Your component code works just fine, here is a Stackblitz reproduction of your app.

Note that imports can use aliases, the example above uses a relative import path.

There was no error in my code, it turns out that my internet connection was not working at that time. The code runs find on other computers which have a proper network connection. I just wasted 1 day fixing the non existent problem in my code.