как реализовать кнопку удаления в react

Помогите плиз. Нужно реализовать кнопку которая удалит задачу из столбца на канбан доске в react. Пытался сделать через состояния и хуки ничего не получилось. Скажите хотя бы в каком направлении думать.

App.js:

import { Box, Flex } from '@chakra-ui/react';
import { useState } from 'react';
import { Column } from './components/Column';
export const initialData = {
  tasks: {
    'task-1': { id: 'task-1', content: 'Task 1', date: '12.12.2023' },
    'task-2': { id: 'task-2', content: 'Task 2', date: '13.12.2023' },
  },
  columns: {
    'column-1': {
      id: 'column-1',
      title: 'Planned',
      taskIds: ['task-1', 'task-2'],
      color: '#ff4244',
    },
    'column-2': {
      id: 'column-2',
      title: 'In Working',
      taskIds: [],
      color: '#b4a6ff',
    },
    'column-3': {
      id: 'column-3',
      title: 'Testing',
      taskIds: [],
      color: '#41ffbb',
    },
    'column-4': {
      id: 'column-4',
      title: 'Release',
      taskIds: [],
      color: '#f5df8b',
    }
  },
  columnOrder: ['column-1', 'column-2', 'column-3', 'column-4'],
};
function App() {
  const [columns, setColumns] = useState(initialData.columns);
  return (
    <Box minHeight={'100vh'} overflow={'hidden'} bg={'blackAlpha.600'} p={5}>
        <Flex width={'fit-content'} margin={'auto'} justifyContent={"space-between"} direction="row">
          {initialData.columnOrder.map((columnId) => {
            const column = columns[columnId];
            const tasks = column.taskIds.map(taskId => initialData.tasks[taskId]);
            return <Column column={column} tasks={tasks} columns={columns} setColumns={setColumns} key={column.id} />;
          })}
        </Flex>
    </Box>
  );
}
export default App;

Column.js:

import { Box, Flex, Text, VStack } from '@chakra-ui/react';
import { useState } from 'react';
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton, Button, Input, FormControl, FormLabel } from "@chakra-ui/react";
import { Task } from './Task';

export function Column({ column, tasks, columns, setColumns }) {
  const [isAddTaskModalOpen, setIsAddTaskModalOpen] = useState(false);
  const [currentColumnId, setCurrentColumnId] = useState(null);


  return (
    <Flex
      spacing={2}
      width="250px"
      minHeight="600px"
      p={2}
      bg="blackAlpha.600"
      borderRadius="md"
      flexDirection="column" alignItems="start" m={2}>
      <Text w={"100%"} borderRadius={"md"} display='flex' justifyContent={"center"} alignItems={"center"} minHeight={'50px'} textAlign={"center"} color="white" bg={column.color} mb={2} fontWeight="bold">{column.title}</Text>
      <VStack
        spacing={2}
        width="100%"
        transition="background-color 0.2s ease"
      >
        {column.taskIds.map((taskId, index) => {
          const task = tasks.find(t => t.id === taskId);
          return (
            <Box
              width={'100%'}
            >
              <Task handleDelete={() => { }} task={task} />
            </Box>
          );
        })}
      </VStack>
      <Button onClick={() => {
        setCurrentColumnId(column.id);
        setIsAddTaskModalOpen(true);
      }}>
        Добавить задачу
      </Button>
      <Modal isOpen={isAddTaskModalOpen} onClose={() => setIsAddTaskModalOpen(false)}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Добавить задачу</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <FormControl>
              <FormLabel>Содержимое задачи</FormLabel>
              <Input value={''} onChange={e => {}} placeholder="Введите содержимое задачи..." />
            </FormControl>
          </ModalBody>

          <ModalFooter>
            <Button variant="ghost" mr={3} onClick={() => setIsAddTaskModalOpen(false)}>
              Отменить
            </Button>
            <Button colorScheme="blue" onClick={() => {}}>Добавить</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Flex>
  );
}

Task.js:

import { Box, Flex, IconButton, Text } from '@chakra-ui/react';
import { DeleteIcon } from '@chakra-ui/icons';

export function Task({ task, handleDelete }) {
  return (
    <Box
      w={'100%'}
      p={2}
      bg="blue.100"
      borderRadius="md"
      mb={2}
      display="flex"
      alignItems="center"
      justifyContent="space-between"
    >
      <Flex flexDirection="column">
        <Text>{task.content}</Text>
        <Text fontSize="sm" color="gray.600">{task.date}</Text>
      </Flex>
      <IconButton
        icon={<DeleteIcon />}
        variant="ghost"
        size="sm"
        onClick={() => { }}
        aria-label="Delete Task" />
    </Box>
  );
}