I am developing feature for opening a filter box when click on button and i need to close it when clicked outside. For this I have used useRef hook and i am using antd ui elements like select and datepicker. Everything is working fine but when i click on menu opened by select or datepicker component and select any option. It is getting considered as hanleclciked outside but the component is inside my ref. I am adding code and screenshots for refernce.

import { Card, Select } from "antd";
import { FilterObject, PaymentStatus } from "../../helpers/types";
import { capitalizeString } from "../../helpers/functions";
import { CommonDatePicker } from "../datePicker/CommonDatePicker";
import { CommonButton } from "..";
import { useEffect, useRef, useState } from "react";
import { filterIcon } from "../../../finance/assets";
import { FILTERS } from "../../helpers/constants";

export const Filters = () => {
  // useStates
  const [showFilters, setShowFilters] = useState<boolean>(false);
  const [filters, setFilters] = useState<FilterObject>({
    status: "",
    startDate: "",
    endDate: "",
  });

  // useRef
  const filterRef = useRef<any>(null);

  // useEffect
  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
    () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });

  //   funticons
  const handleClickOutside = (event: any) => {
    if (filterRef.current && !filterRef.current.contains(event.target)) {
      setShowFilters(false);
    }
  };

  const handleFilterChange = (name: string, value: string) => {
    const tempFilters: FilterObject = { ...filters };
    if (name === FILTERS.status) {
      tempFilters.status = value;
    }
    console.log(tempFilters);

    setFilters(tempFilters);
  };

  return (
    <div ref={filterRef}>
      {showFilters && (
        <Card className="absolute top-[4.8rem] right-[10rem] text-[#232425] text-[14px] z-50 w-[21rem] bg-[#FFFFFF]">
          <p className="font-bold text-lg">Filter By</p>
          <hr className="mt-4" />
          <div className="mt-4">
            <p>Select Status</p>
            <Select
              className="w-full mt-2"
              onChange={(e: string) => {
                handleFilterChange(FILTERS.status, e);
              }}
              defaultValue="Select Status"
              options={[
                {
                  value: PaymentStatus.approved,
                  label: capitalizeString(PaymentStatus.approved),
                },
                {
                  value: PaymentStatus.pending,
                  label: capitalizeString(PaymentStatus.pending),
                },
                {
                  value: PaymentStatus.rejected,
                  label: capitalizeString(PaymentStatus.rejected),
                },
              ]}
            />
          </div>
          <div className="mt-4">
            <p>From Date</p>
            <CommonDatePicker
              onChange={(e) => {
                console.log(e);
              }}
              inputClass="w-full"
            />
          </div>
          <div className="mt-4">
            <p>To Date</p>
            <CommonDatePicker
              onChange={(e: any) => {
                console.log(e);
              }}
              inputClass="w-full"
            />
          </div>

          <CommonButton
            title="Submit"
            onClick={() => {}}
            buttonClass="[&]:w-full [&]:h-[2.2rem]"
          />
        </Card>
      )}
      <img
        className="cursor-pointer"
        src={filterIcon}
        alt=""
        onClick={() => setShowFilters(!showFilters)}
      />
    </div>
  );
};

as i said when i click on approve pending or reject. It is getting considered as outside click
filter image

When i click or select filters option, I dont want to consider it as outside click and do not want to close the filter box.