Why are cllient components not working - NextJS 13.3.0 experimental features

As I understand the beta docs, I need to use "use client" at top of my client component to be defined as one, and I can use it inside server components, leaves or layouts.

With that so, here's my code.

ClientComponent.js

"use client";

export default function ClientComponent() {
  return (
    <div>
        <h1>This is a client component!</h1>
    </div>
  )
}

ServerComponent.js

import ClientComponent from "./ClientComponent"

export default function ServerComponent() 
{

    return (
        <div>
            <h1>This is a server component!</h1>
            <ClientComponent/>
        </div>
    )
}

Page.js (Leaf)

import { Inter } from 'next/font/google'

import ServerComponent from './ServerComponent';

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <main styles={inter.className}>
      <ServerComponent/>
    </main>
  )
}

But I get this error:

Unhandled Runtime Error

SyntaxError: "undefined" is not valid JSON

Call Stack JSON.parse

React

parseModel

node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (33:0)

resolveModule

node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (749:0)

processFullRow

node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (825:0)

processBinaryChunk

node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (869:0)

progress

node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1476:0)

Even if I put directly the client component inside <main> in the leaf, it appears the same error. I do not understand what's happening as I'd followed the docs. Can someone help?

EDIT: This only happen when client components are added anywhere to the code.

EDIT 2: Look at this repo I made on GitHub, it contains a project with a nearly identical code that causes the same issue https://github.com/Benevos/nextjs-error

Found solution here: https://github.com/vercel/next.js/issues/47704#issuecomment-1500914372

Just use arrow functions

Change

export default function Home() {
  return (
    <main styles={inter.className}>
      <ServerComponent/>
    </main>
  )
}

to

const Home = () => {
  return (
    <main styles={inter.className}>
      <ServerComponent/>
    </main>
  )
}

export default Home