So this is how i created a demo form with shadcn ui but im getting this error i did not understood what i did wrong

"use client";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { SignUpFormSchema } from "@/features/auth/schemas/sign-up";
import { zodResolver } from "@hookform/resolvers/zod";
import { LucideUser } from "lucide-react";
import { useForm } from "react-hook-form";
import type { z } from "zod";
const SignUpPage = () => {
  const form = useForm<z.infer<typeof SignUpFormSchema>>({
    resolver: zodResolver(SignUpFormSchema),
    defaultValues: {
      name: "",
      email: "",
      password: "",
      confirmPassword: "",
    },
  });
  const onSubmit = (values: z.infer<typeof SignUpFormSchema>) => {};
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <div className="grid gap-4">
          {/* Name Field */}
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem>
                <FormLabel htmlFor="name">Name</FormLabel>
                <FormControl className="relative">
                  <Input id="name" placeholder="John Doe" {...field} />
                  <LucideUser className="absolute" />
                </FormControl>
              </FormItem>
            )}
          />
        </div>
      </form>
    </Form>
  );
};

export default SignUpPage;