download a file in react , how to pass start_date & end_date to follow with the file downloading

Hello everyone,
I have occured a problem to download a file from the api response , the start & end of date is a paramater at the call of the api ,
my question is how to do to pass through the start_date & end_date if changed the interval of time at daterangeselect , the link for downloading the file gets **updated **for any changement at interval .
I hope i explained clearly the problem , i hope you can help me with this , an example or a clear approach to follow would be very helpful . i express my gratirude to everybody seing this post and taking time reading it from the begining.

import { Popover, Transition } from '@headlessui/react';
import { CSVIcon, DownloadIcon } from 'components/Icons';
import { Fragment } from 'react';
import { useCsvDownloader } from 'services/useCsvResponse';

const exportOptions = [
  {
    name: 'Download CSV',
    icon: CSVIcon,
  },
];

export const ExportButton = () => {
  const { getCsvFile } = useCsvDownloader();

  const downloadCSVFile = async () => {
    const data = await getCsvFile({
      start_date: new Date('2021-12-21T09:35:31.820Z'),
      end_date: new Date('2022-12-21T09:35:31.820Z'),
    });

    const json = JSON.stringify(data);
    const blob = new Blob([json], { type: 'text/csv' });

    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.setAttribute('href', url);
    a.setAttribute('download', 'orders.csv');
    a.click();
  };

  return (
    <div className="mr-2">
      <Popover className="relative">
        {({ open }) => (
          <>
            <Popover.Button className="ml-2 group inline-flex gap-x-2 items-center hover:bg-secondary hover:bg-opacity-50 p-2 rounded-sm shadow-sm">
              <span>Export</span>
              <DownloadIcon
                className={`${open ? '' : 'text-opacity-70'}
                  ml-2 h-5 w-5 text-primary transition duration-50 ease-in-out group-hover:text-opacity-80`}
                aria-hidden="true"
              />
            </Popover.Button>
            <Transition
              as={Fragment}
              enter="transition ease-out duration-400"
              enterFrom="opacity-0 translate-z-1"
              enterTo="opacity-100 translate-y-0"
              leave="transition ease-in duration-150"
              leaveFrom="opacity-100 translate-y-0"
              leaveTo="opacity-0 translate-y-1"
            >
              <Popover.Panel className="absolute z-10 mt-2 w-40 left-0  transform sm:px-0 lg:max-w-3xl">
                <div className="overflow-y max-h-60 min-w-fit cursor-pointer rounded-md shadow-lg">
                  <div className="relative grid gap-1 bg-white text-primary">
                    {exportOptions.map((item) => (
                      <a
                        key={item.name}
                        onClick={downloadCSVFile}
                        className="flex items-center hover:bg-secondary hover:bg-opacity-50"
                      >
                        <div
                          key={item.name}
                          className="flex h-10 w-10  items-center justify-center text-white sm:h-12 sm:w-12"
                        >
                          <item.icon aria-hidden="true" />
                        </div>
                        <p className=" text-sm font-medium ">{item.name}</p>
                      </a>
                    ))}
                  </div>
                </div>
              </Popover.Panel>
            </Transition>
          </>
        )}
      </Popover>
    </div>
  );
};