the Scroll Doesn't works

[hacking-impossible]

The scroll on the Popover Content doesn't works now.
Do you have any idea why it doesn't works?

import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { type UseFormReturn } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";
import { useEffect, useMemo, useState } from "react";
import { ChevronDownIcon, SearchIcon } from "lucide-react";
import _ from "@/utils/lodash";
interface IFilterableSelectFormFieldProps {
  form: UseFormReturn<any>;
  name: string;
  title: string;
  placeholder?: string;
  searchplaceholder?: string;
  notfoundplaceholder?: string;
  disabled?: boolean;
  options: {
    id: any;
    name: string;
  }[];
  onChange?: (value: any) => void;
}

export default function FilterableSelectFormField({
  form,
  name,
  title,
  disabled = false,
  placeholder,
  searchplaceholder,
  notfoundplaceholder,
  options = [],
  onChange,
}: IFilterableSelectFormFieldProps) {
  const [open, setOpen] = useState(false);
  const [keyword, setKeyword] = useState("");

  useEffect(() => {
    setKeyword("");
  }, [open]);

  const lowercased = useMemo(() => keyword.toLowerCase(), [keyword]);
  const filteredOptions = useMemo(
    () => options.filter((option) => !lowercased || option.name.toLowerCase().includes(lowercased)).slice(0, 100),
    [options, lowercased],
  );

  return (
    <FormField
      control={form.control}
      name={name}
      render={({ field }) => (
        <FormItem>
          <FormLabel>{title}</FormLabel>
          <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
              <FormControl>
                <Button variant="outline" className={cn("relative w-full justify-start", !field.value && "text-muted-foreground")} disabled={disabled}>
                  {field.value !== null ? options?.find((option) => option.id === field.value)?.name || "" : placeholder}
                  <ChevronDownIcon className="absolute right-1 h-5 w-5 shrink-0 opacity-50" size={20} />
                </Button>
              </FormControl>
            </PopoverTrigger>
            <PopoverContent className="popover-content relative flex min-w-[240px] flex-col p-0">
              <div className="flex items-center border-b px-3">
                <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
                <input
                  className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
                  placeholder="Type keyword to search. It will show up top 100 records to you."
                  type="text"
                  onChange={_.debounce((e) => {
                    setKeyword(e.target.value);
                  }, 200)}
                />
              </div>
              <div className="relative flex-1 overflow-auto bg-white">
                <div className="p-1 text-sm text-foreground">
                  {filteredOptions.map((option) => (
                    <div
                      key={option.id}
                      className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-gray-100"
                      onClick={() => {
                        form.setValue(name, option.id);
                        setOpen(false);
                        onChange && onChange(option.id);
                      }}
                    >
                      {option.name}
                    </div>
                  ))}
                </div>
              </div>
            </PopoverContent>
          </Popover>
          <FormMessage />
        </FormItem>
      )}
    />
  );
}