I’m using shadcn, react-hook-form and react.
I’m wondering why is it after filling out some fields, they aren’t submitting the data? They are inside sheet component.
How would I fix this?

Here’s my codesandbox: —> CLICK HERE

<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} method="post">
  <Sheet>
    <SheetTrigger asChild>
      <Button variant="ghost" size="sm" type="button">
        <Pencil className="text-slate-500 h-4 w-4" />
      </Button>
    </SheetTrigger>
    <SheetContent side="right">
      <SheetHeader>
        <SheetTitle>Edit a product</SheetTitle>
      </SheetHeader>
      <FormField
        control={form.control}
        name="product_name"
        render={({ field }) => (
          <FormItem>
            <FormLabel>First name</FormLabel>
            <FormControl>
              <Input placeholder="First name" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
      <FormField
        control={form.control}
        name="product_description"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Last name</FormLabel>
            <FormControl>
              <Input placeholder="Last name" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
      <SheetFooter>
        <Button type="submit">Save changes</Button>
      </SheetFooter>
    </SheetContent>
  </Sheet>
</form>
</Form>