Form using tutorial - type errors 'is not assignable to type'

[gronnmann]

Following the shadcn docs, I have made the following code:

"use client"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { z } from "zod"

import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import {useForm} from "react-hook-form";
import {zodResolver} from "@hookform/resolvers/zod";

const formSchema = z.object({
  email: z.string().email({
    message: "E-posten er ikke gyldig",
  }),
  password: z.string(),
})

export function LoginForm({
                            className,
                            ...props
                          }: React.ComponentProps<"div">) {

  const form = useForm<>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
      <div className={cn("flex flex-col gap-6", className)} {...props}>
        <Card>
          <CardHeader>
            <CardTitle>Logg inn</CardTitle>
            <CardDescription>
              Skriv e-post og passord for å logge inn.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Form {...form}>
              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                <FormField
                    name="email"
                    render={({ field }) => (
                        <FormItem>
                          <FormLabel>E-post</FormLabel>
                          <FormControl>
                            <Input placeholder="[email protected]" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                    )}
                />
                <FormField
                    name="password"
                    render={({ field }) => (
                        <FormItem>
                          <FormLabel>Passord</FormLabel>
                          <FormControl>
                            <Input type="password" placeholder="Passord" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                    )}
                />
                <Button type="submit" className="w-full">Logg inn</Button>
              </form>
            </Form>
            <div className="mt-4 text-center text-sm">
              Ingen konto?{" "}
              <a href="/register" className="underline underline-offset-4">
                Registrer deg her
              </a>
            </div>
          </CardContent>
        </Card>
      </div>
  )
}

This however gives me two typescript errors:

from <Form {...form}>:

Type ...UseFormReturn<FieldValues, any, FieldValues> is not assignable to type React.ReactNode | React.ReactNode[] 

And from both FormField's:

Type ({field}: {field: any}) => JSX.Element is not assignable to type ({field, fieldState, formState}: {field: ControllerRenderProps<FieldValues, string>, fieldState: ControllerFieldState, formState: UseFormStateReturn<FieldValues>}) => React.ReactElement 

Any ideas what this could be? All help is appreciated!