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

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 :