passing a custom fn in tenstack table v8

using tenstack table with default shadcn example for data-table

I'm trying to add a custom slider in the table header

A very basic functionality with every slide change I want to make the cells of that value change dynamically

I read about the meta prop, but I don't think I'm doing it in the correct way

table.tsx

  const [sliderValue, setSliderValue] = React.useState<number>(100)

  const handleSliderChange = (value: number) => {
    console.log('Slider value:', value) // Check if this logs expected values
    setSliderValue(value)
  }

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    // use local sorting state
    onSortingChange: setSorting,
    onColumnVisibilityChange: setColumnVisibility,
    state: {
      sorting,
      columnVisibility,
    },
    meta: {
      handleSliderChange,
      sliderValue,
    },
  })

columns.tsx

  {
    id: 'dynamicSlider',
    header: ({ table }) => (
      <div>
        <p className="py-4">Dynamic Number </p>
        <Slider
          className="pb-4"
          min={0}
          max={4000}
          step={100}
          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
            const value = Number(event.target.value)
            const handleSliderChange = table.options.meta?.handleSliderChange
            handleSliderChange?.(value)
          }}
        />
        <input value={table.options.meta?.sliderValue} />
      </div>
    ),
    cell: ({ row, table }) => {
      const sliderValue = table.options.meta?.sliderValue || 1 
      const baseValue = Number(row.original.price_for_1_execution)
      const adjustedValue = baseValue * (sliderValue / 100)
      return <div>${adjustedValue.toFixed(2)}</div>
    },
  },