When using react-select components with react-hook-form inside a Radix UI Sheet or Modal, the tabindex does not work

Question

I have a saas project where I use React hook form and shadcn-ui. when I run the form I created in nextjs page, I can use it without any problem. When I use the form in sheet component, tabindex does not work properly.

page.tsx

import { CustomForm } from "@/components/custom-form";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

const HomePage = () => {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <Sheet>
        <SheetTrigger asChild>
          <Button className="bg-blue-500 text-white px-4 py-2 rounded">
            Open Form
          </Button>
        </SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Sample Form</SheetTitle>
            <SheetDescription></SheetDescription>
          </SheetHeader>
          <CustomForm />
        </SheetContent>
      </Sheet>
    </div>
  );
};

export default HomePage;

custom-form.tsx

"use client";
import { z } from "zod";
import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import Select from "react-select";

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

const colors = [
  { value: "red", label: "Red" },
  { value: "blue", label: "Blue" },
  { value: "white", label: "White" },
];

const sizes = [
  { value: "s", label: "S" },
  { value: "m", label: "M" },
  { value: "l", label: "L" },
];

const formSchema = z.object({
  name: z.string(),
  email: z.string().email(),
  color: z
    .object({
      value: z.string(),
      label: z.string(),
    })
    .nullable(),
  size: z
    .object({
      value: z.string(),
      label: z.string(),
    })
    .nullable(),
});

type FormSchema = z.infer<typeof formSchema>;

export const CustomForm = () => {
  const form = useForm<FormSchema>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      color: null,
      size: null,
    },
  });

  const onSubmit = (values: FormSchema) => {
    console.log(values);
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel id="name-label">Name</FormLabel>
              <FormControl>
                <Input {...field} placeholder="Name" />
              </FormControl>
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel id="email-label">Email</FormLabel>
              <FormControl>
                <Input {...field} placeholder="Email" />
              </FormControl>
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="color"
          render={({ field }) => (
            <FormItem>
              <FormLabel id="name-label">Color</FormLabel>
              <FormControl>
                <Select {...field} options={colors} />
              </FormControl>
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="size"
          render={({ field }) => (
            <FormItem>
              <FormLabel id="name-label">Size</FormLabel>
              <FormControl>
                <Select {...field} options={sizes} />
              </FormControl>
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
};

The expected behavior is that after selecting a color input, pressing the tab key should move the focus to the size input, but instead, it selects the sheet component. The tab key does not move the focus to the size input or button at all.

I defined tabindex to form elements and sheet component, I used useRef, I read dozens of pages but I could not find a solution.