Tanstack Table & React JS: How to Show/Hide Button depend on Status when using React JS and Tanstack Table

I have react js and implement tanstack table(react-table). I need help to make button/link show or hide depended on the status in each row. Let say if there is row contain status 'Approve' the button will show, then if not it will hidden.

......some initiliaze data

  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState({});
  const [isApproved, setIsApprove] = useState(false);
......calling column
const columns = useMemo<ColumnDef<IEvent>[]>(
......list of column 
{
        accessorKey: "status",
        header: () => <span>Status</span>,
        cell: (cell: any) => {
          let status = cell.getValue();
          return cell.getValue();
        },
        enableSorting: true,
        enableColumnFilter: true,
      },
      {
        accessorKey: "actions",
        header: () => <span>Action</span>,
        cell: (cell: any) => {
          console.log(isApproved);
          return (
            <div className="inline-flex gap-x-2">
              <Link to={`./${cell.row.id}/edit`}>Edit</Link>
              <EVSDeleteButton id={cell.row.id} header="event" />
              <Link to={`./${cell.row.id}/agenda`}>Agenda</Link>
            </div>
          );
        },
        enableSorting: false,
        enableColumnFilter: false,
      },

I hope can show/hide button('Agenda') depended status on each row

You can access the value of status from each row using cell.row.original.status and show the button based on the value instead of storing it in a state variable.

cell: (cell: any) => (
        <div className="inline-flex gap-x-2">
          <Link to={`./${cell.row.original.id}/edit`}>Edit</Link>
          {cell.row.original.status === "Approved" && (
            <Link to={`./${cell.row.original.id}/agenda`}>Agenda</Link>
          )}
        </div>
      ),