.
.
.
  useEffect(() => {
    const handleWheel = (e: WheelEvent) => {
      if ((e.target as Element).closest('[data-scrollable]')) return;
      e.stopPropagation();
    };

    const handleTouchMove = (e: TouchEvent) => {
      if ((e.target as Element).closest('[data-scrollable]')) return;
      e.stopPropagation();
    };

    document.addEventListener('wheel', handleWheel, true);
    document.addEventListener('touchmove', handleTouchMove, true);
    return () => {
      document.removeEventListener('wheel', handleWheel, true);
      document.removeEventListener('touchmove', handleTouchMove, true);
    };
  }, []);
return (
  <Controller
        control={control}
        name="birthday.year"
        render={({ field: { onChange, value } }) => (
          <Select value={value} onValueChange={onChange}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="YYYY">{value}</SelectValue>
            </SelectTrigger>
            <SelectContent
              className="max-h-[210px] overflow-y-scroll"
              data-scrollable
            >
              {YearElement}
            </SelectContent>
          </Select>
        )}
      />
)