I'm trying to implement the steps in the shadcn form component, but I'm having an issue that I can't figure out why.
this is my form

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { transactionSchema } from "@/lib/schemas";
import { Transaction } from "@/lib/types";
import { useCategoriesContext } from "@/lib/hooks";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

const TransactionForm = () => {
  const { categories } = useCategoriesContext();
  const form = useForm<Transaction>({
    resolver: zodResolver(transactionSchema),
    defaultValues: {
      categoryId: categories[0]?.id,
      name: "",
      category: "",
      amount: 0.0,
      description: "",
      transactionDate: new Date(),
    },
  });

  function onSubmit(values: Transaction) {
       
    }
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input placeholder="name" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
};

export default TransactionForm;

tsx
the error I'm receiving is highlighted when spreading the form variable into the Form component as shown in the image:
Type ...UseFormReturn<Transaction, any, undefined> is not assignable to type React.ReactNode | React.ReactNode[].