I have a delete action in my data table row action, I wanted to display a toast for a successful deletion. I am able to get the expected result in dev run, but I am getting this ESLint rule error upon building the project for production.

Error: React Hook "useToast" is called in function "cell" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

Based on next.js [docs](https://nextjs.org/docs/pages/building-your-application/configuring/eslint#disabling-rules), it's possible to disable rules, but is there a more suitable way of going around this?

Here is my columns.tsx file:

"use client";

export const columns: ColumnDef<File>[] = [
  {
    ...
  },
  {
    id: "actions",
    cell: ({ row }) => {
      const file = row.original;

      const { toast } = useToast();
      const onDeleteFile = async () => {
          
          const response = await deleteFileById(file.id);

          if (response.success) {
            toast({
              duration: 2000,
              variant: "success",
              description: response.success
          })
          }
      };

      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem>
                <Button 
                  variant='destructive' 
                  className="flex gap-x-2 w-full"
                  onClick={ async () => await onDeleteFile()} 
                >
                    <Trash className="h-4 w-4"/>
                    Delete File
                </Button>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  }
]