Why my dispatch is not working for button click event?

I have built a Trello clone using ReactJS, where I have 4 columns called TODO, DOING, DONE and REJECTED, where I can add a card to any column.

In a file I am trying to map over card component and rendering properties from defined dummy data.

What I want to do?

• I want to delete a specific card when the button is clicked.

What I tried?

• I have added the functionality in my Redux store, but when adding the onclick event to my button, I cannot access the dispatch method which will trigger the deleteCard function.

How do I do that?

My TaskboardList.js component :

import React from "react";
import TaskboardCard from "./TaskboardCard";
import TaskboardActionButton from "./TaskboardActionButton";
import { Droppable } from "react-beautiful-dnd";

const TaskboardList = ({ title, cards, listID }) => {
  return (
    <Droppable droppableId={String(listID)}>
      {provided => (
        <div
          className="taskboardlist_container"
          {...provided.droppableProps}
          ref={provided.innerRef}
          style={styles.container}
        >
          <div className="sub-heading">{title}</div>
          {cards.map((card, index) => (
            <TaskboardCard
              key={card.id}
              index={index}
              text={card.text}
              id={card.id}
            />
          ))}
          <TaskboardActionButton listID={listID} />
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
};

const styles = {
  container: {
    backgroundColor: "#eee",
    width: 300,
    padding: "0.5rem",
    marginRight: "1rem",
    height: "100%"
  }
};

export default TaskboardList;

My TaskboardCard.js component

import React from "react";
import Card from "@material-ui/core/Card";
import Typography from "@material-ui/core/Typography";
import CardContent from "@material-ui/core/CardContent";
import { Draggable } from "react-beautiful-dnd";
import { connect } from "react-redux";

import { deleteCard } from "../actions";

const TaskboardCard = ({ text, id, index, sample, cardId }) => {
  // handleClickDelete = () => {
  //   // const { dispatch } = this.props;
  //   // dispatch(deleteCard(cardId));
  //   console.log("clicked");
  // };

  return (
    <Draggable draggableId={String(id)} index={index}>
      {provided => (
        <div
          className="taskboard_container"
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <Card>
            <CardContent>
              <Typography style={{ fontSize: "1.5rem" }} gutterBottom>
                {text}
              </Typography>
            </CardContent>
          </Card>
          {/* //delete added */}
          <button
            onClick={(cardId, props, sample, dispatch) => {
              //const { dispatch } = this.props;
              dispatch(deleteCard(cardId));
            }}
          >
            DELETE
          </button>
          {/* ////////////////////// */}
        </div>
      )}
    </Draggable>
  );
};

export default connect()(TaskboardCard);

In the above component delete button is not working because somehow i cannot access the dispatch.

Here is my codesandbox link for further reference to files https://codesandbox.io/s/github/abhinav-anshul/consensolabs