How to add filtering by date

{
                id: "created_at",
                accessorKey: "created_at",
                header: translate("parcels.fields.created_at"),
                meta: {
                    filterOperator: "gte"
                },
                cell: function render({ getValue }) {
                    return <DateField format="DD/MM/YYYY" value={getValue<any>()} />;
                },
            },

{
                id: "created_at",
                accessorKey: "created_at",
                header: translate("parcels.fields.created_at"),
                meta: {
                    filterOperator: "gte"
                },
                cell: function render({ getValue }) {
                    return <DateField format="DD/MM/YYYY" value={getValue<any>()} />;
                },
            },

import React, { useState } from "react";
import { Input, Menu, IconButton, MenuButton, MenuList, VStack, HStack } from "@chakra-ui/react";
import { IconFilter, IconX, IconCheck } from "@tabler/icons";
import type { Column } from "@tanstack/react-table";
import { SingleDatepicker } from "chakra-dayzed-datepicker"
import { parseISO, parse, formatISO, format } from "date-fns"

export const ColumnFilter: React.FC<{ column: Column<any, any> }> = ({ column }) => {
  const [state, setState] = useState(null as null | { value: any });

  if (!column.getCanFilter()) {
    return null;
  }

  const open = () =>
    setState({
      value: column.getFilterValue(),
    });

  const close = () => setState(null);

  const change = (value: any) => setState({ value });

  const renderFilterElement = () => {
    const FilterComponent = (column.columnDef?.meta as any)?.filterElement;

    if (column.id === "created_at" && !FilterComponent && !!state) {
      return (<SingleDatepicker
        date={state.value}
        configs={{
          dateFormat: "yyyy-dd-MM"
        }}
        onDateChange={(date) => {
          change(date)
        }}
    }

import React, { useState } from "react";
import { Input, Menu, IconButton, MenuButton, MenuList, VStack, HStack } from "@chakra-ui/react";
import { IconFilter, IconX, IconCheck } from "@tabler/icons";
import type { Column } from "@tanstack/react-table";
import { SingleDatepicker } from "chakra-dayzed-datepicker"
import { parseISO, parse, formatISO, format } from "date-fns"

export const ColumnFilter: React.FC<{ column: Column<any, any> }> = ({ column }) => {
  const [state, setState] = useState(null as null | { value: any });

  if (!column.getCanFilter()) {
    return null;
  }

  const open = () =>
    setState({
      value: column.getFilterValue(),
    });

  const close = () => setState(null);

  const change = (value: any) => setState({ value });

  const renderFilterElement = () => {
    const FilterComponent = (column.columnDef?.meta as any)?.filterElement;

    if (column.id === "created_at" && !FilterComponent && !!state) {
      return (<SingleDatepicker
        date={state.value}
        configs={{
          dateFormat: "yyyy-dd-MM"
        }}
        onDateChange={(date) => {
          change(date)
        }}
    }