Select component is not working with Sheet

[MusabDev]

Hello, I have a sheet with select component used inside it. But when I try to change value in select component, it doesn't let me do that.

Code to reproduce the issue:

<Sheet>
  <SheetTrigger><button>open sheet</button></SheetTrigger>
  <SheetContent className="w-full overflow-auto sm:max-w-[500px]">
    <SheetHeader>
      <SheetTitle>Create a new worker</SheetTitle>
    </SheetHeader>
    <div className="pt-6">
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(handleCreate)}
          className="space-y-8"
        >
            <FormField
              control={form.control}
              name="religion"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Religion</FormLabel>
                  <FormControl>
                    <Select {...field}>
                      <SelectTrigger>
                        <SelectValue placeholder="Select" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Islam">Islam</SelectItem>
                        <SelectItem value="Christian">Christian</SelectItem>
                        <SelectItem value="Jew">Jew</SelectItem>
                        <SelectItem value="Hindu">Hindu</SelectItem>
                        <SelectItem value="Sikh">Sikh</SelectItem>
                      </SelectContent>
                    </Select>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          <div className="flex items-center justify-end gap-3">
            <Button type="submit">Create</Button>
          </div>
        </form>
      </Form>
    </div>
  </SheetContent>
</Sheet>

Video: https://github.com/shadcn-ui/ui/assets/83802666/1797c0dd-2810-40e4-99b3-93f735570997

[aslammac]

Add onValueChanges and defaultValues will change your selection

` <Select onValueChange={field.onChange} defaultValue={field.value}>

                  <SelectContent>
                    <SelectItem value="Islam">Islam</SelectItem>
                    <SelectItem value="Christian">Christian</SelectItem>
                    <SelectItem value="Jew">Jew</SelectItem>
                    <SelectItem value="Hindu">Hindu</SelectItem>
                    <SelectItem value="Sikh">Sikh</SelectItem>
                  </SelectContent>
                </Select>
              </FormControl>  `

[MusabDev]

Instead of spreading the props from react-hook-form directly, I added those manually. And it fixed the problem.

You can check the example here: https://ui.shadcn.com/docs/components/select

<Select
  onValueChange={field.onChange}
  value={field.value}
  disabled={field.disabled}
>