(intermediate value)() is null

[dlukt]

import {useForm} from 'react-hook-form';
import {Form} from 'react-router';
import {FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage} from '@/components/ui/form.tsx';
import {Input} from '@/components/ui/input.tsx';
import {Button} from '@/components/ui/button.tsx';
import {z} from 'zod';
import {zodResolver} from '@hookform/resolvers/zod';

const ShopNewPageFormSchema = z.object({
    name: z.string().nonempty({
        message: 'Die Bezeichnung darf nicht leer sein'
    }),
    address: z.string().nonempty({
        message: 'Die Adresse sollte ausgefüllt sein'
    }),
})

export default function ShopNewPage() {
    const form = useForm<z.infer<typeof ShopNewPageFormSchema>>({
        resolver: zodResolver(ShopNewPageFormSchema),
        defaultValues: {
            name: '',
            address: '',
        }
    });
    const onSubmit = (data: z.infer<typeof ShopNewPageFormSchema>) => {
        console.log(data);
    }
    return (
        <>
            <h1>Neue Verkaufsstelle hinzufügen</h1>
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)}>
                    <FormField
                        control={form.control}
                        name="name"
                        render={({field}) => (
                            <FormItem>
                                <FormLabel>Bezeichnung</FormLabel>
                                <FormControl>
                                    <Input placeholder="Bezeichnung" {...field} />
                                </FormControl>
                                <FormDescription>
                                    Die eindeutige Bezeichnung für Ihre Verkaufsstelle. z.B. Lager Stadtname
                                </FormDescription>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <Button type="submit">Erstellen</Button>
                </form>
            </Form>
        </>
    )
}

I don't know what that even means, some intermediate value is null of what?

Chromium console has different info

Cannot destructure property 'getFieldState' of 'useFormContext(...)' as it is null.
    at useFormField (form.tsx:46:11)
    at FormLabel (form.tsx:92:33)

[dlukt]

It was a wrong import.

import {
    Form,
    FormControl,
    FormDescription,
    FormField,
    FormItem,
    FormLabel,
    FormMessage
} from '@/components/ui/form.tsx';
``