How can I filter the data using only the month and year using?

Question

so I'm trying to learn tanstacktable/v8 and I'm using shadcn's Datatable tutorial on this, but I'm having a little of bit of trouble on how can I render the dates by using <Input type="month /> only.

What do I mean by this, instead of filtering the data by dates using start date to end date. I only want to render the selected date using input field but I'm quite stuck. I've been trying to read the docs but I'm really having docs but having a difficult time understanding it.

this is my data coming from database

const data = [
{
   "dateOfEvent": "6/4/24"
},
{
   "dateOfEvent": "5/27/24"
},
]

So what I did is like this, from my Page. I call the component

AdminDashboard.tsx

export const AdminDashboard = async () => {
  const data = await getData();
  


  return (
    <>
     <DataTable columns={columns} data={data} />
    </>
  );
};

DataTable.tsx

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const [sorting, setSorting] = React.useState<SortingState>([]);


  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  );

  const [columnVisibility, setColumnVisibility] =
    React.useState<VisibilityState>({});
  const [rowSelection, setRowSelection] = React.useState({});

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    onColumnFiltersChange: setColumnFilters,
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    filterFns: {
      dateBetweenFilterFn: dateBetweenFilterFn,

    },
    initialState: {
      pagination: {
          pageSize: 5,
      },
  },
  state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
      
    },
  });

  return (
    <div>
      <DataTableToolbar table={table} />
    </div>
    );
  }

And then I pass it to my DataTableToolbar.tsx

interface DataTableToolbarProps<TData> {
  table: Table<TData>;
}

export function DataTableToolbar<TData>({
  table,
}: DataTableToolbarProps<TData>) {
  const isFiltered = table.getState().columnFilters.length > 0;

return (
{table.getColumn("dateOfEvent") && (
          <FilterByDate
            column={table.getColumn("dateOfEvent")}
            title="Date"
          />
        )}
)}

And then this is my filterdate.tsx

import * as React from "react";
import { Column } from "@tanstack/react-table";
import { Input } from "@/components/ui/input";

interface FilterByDateProps<TData, TValue> {
  column?: Column<TData, TValue>;
  title?: string;
}

export default function FilterByDate<TData, TValue>({
  column,
  title,
}: FilterByDateProps<TData, TValue>) {
  
  const selectedValues = new Set(column?.getFilterValue() as string[])
  const [filterValue, setFilterValue] = React.useState("");


  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setFilterValue(value); 
    console.log(column?.setFilterValue(value))

    column?.setFilterValue(value); // Update column's filter value directly
  };




  return (
    <div>
      <Input
        placeholder={title || "Date"}
        type="month"
        value={filterValue}
        onChange={handleChange}
      />
    </div>
  );
}

So in my UI, this is what it looks like :