"use client";

import { Plus } from "lucide-react";
import { CreateOrganization } from "@clerk/nextjs";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";

export const NewButton = () => {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <div className="aspect-square">
          <button className="bg-white/25 hover:opacity-100 transition h-full w-full rounded-md flex items-center justify-center opacity-60">
            <Plus className="text-white"></Plus>
          </button>
        </div>
      </DialogTrigger>
      <DialogContent>
        <CreateOrganization></CreateOrganization>
      </DialogContent>
    </Dialog>
  );
};

When I use this component of @clerk/nextjs to CreateOrganization, this error is reported, how can I solve it