Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'onAuthStateChange')

page.jsx:

import AuthForm from "./components/AuthForm";

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-900 flex flex-col justify-center">
      {/* Full-screen container */}
      <div className="flex-1 flex justify-center items-center">
        <div className="text-center">
          <h1 className="text-5xl font-bold text-white mb-4">Welcome to Watchlist</h1>
          <p className="text-xl text-gray-300">Manage your watchlist personal space 100%</p>
        </div>
      </div>

      {/* Centered container for AuthForm */}
      <div className="flex justify-center mb-8">
        <div className="max-w-md bg-white rounded-lg shadow-md p-8">
          <AuthForm />
        </div>
      </div>
    </div>
  );
}

authform:

"use client";

import { Auth } from "@supabase/auth-ui-react";
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import { ClassNames } from "@emotion/react";

function AuthForm(){
    const supabase = createClientComponentClient
    return (
        <Auth
        supabaseClient={supabase}
        view="magic_link"
        showLinks={false}
        providers={{}}
        redirectTo="http://localhost:3000/auth/callback"
        appearance={{
            theme: "dark",
            button: {
                ClassName : "bg-white-400 text-grey-900 hover:bg-gray-600",
            },
            input: {
                ClassName : "bg-white-700 border-grey-600 text-white",
            }
        }}
        >

        </Auth>
    )
}

export default AuthForm;

project structure:

[![enter image description here][1]][1]

screenshot of the error:

[![enter image description here][2]][2]

I don’t know why I am getting this error I put the correct anon key and URL in the .env.local why is that error happening?
[1]: https://i.sstatic.net/IbuuhpWk.png
[2]: https://i.sstatic.net/TNbx14Jj.png