I have a chart on my site. For the convenience of the user, I would like to add several filters to the chart (up to date, quantity, time, etc.).

In this question, we will talk about the filter by date. For this, I use the DatePicker component from the react-datepicker library https://reactdatepicker.com/

That is, the essence of the filter is that the user can specify the start date and end date, and get a selection within the dates of interest.

I have common component (because I have a lot of charts)

export default function Diagram() {

  const {
    start: { get: start, set: setStart },
    end: { get: end, set: setEnd },
  } = useFilters();

  const {
    chartData: { get: chartData, set: setChartData },
  } = useAppState();

  return (
        <div>
           <DateChoice />
        </div>
  );
}

And child component

export default function DateChoice() {
  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;
      return (
          <DatePicker
            selectsRange={true}
            startDate={startDate}
            endDate={endDate}
            onChange={(update) => {
              setDateRange(update);
            }}
            isClearable={true}
          />
      );
    }

Also I use hook

export function useFilters() {
  const [start, setStart] = useAtom(startAtom);
  const [end, setEnd] = useAtom(endAtom);

  return {
    start: { get: start, set: setStart },
    end: { get: end, set: setEnd },
  };
}