I’m creating a list of tasks in ReactJs and I’m having a problem with editing the tasks, when I click on the edit button it simply deletes all the tasks, could anyone help me create the editing tasks?

here is the code I developed from the edition

import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { type FormEvent, useEffect, useState } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import CustomizedTables from '../table';
import { CirclePlus } from 'lucide-react';

export default function Body() {
  const [tasks, setTasks] = useState<any[]>([]);
  const [isEditingTask, setIsEditingTask] = useState(false);


  function saveTask(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const data = new FormData(event.currentTarget);
    const taskValue = data.get('task')?.toString().trim();
    if (!taskValue) {
      toast.error('Tarefa não inserida');
      return;
    }
    event.currentTarget.reset();
    setTasks([...tasks, taskValue]);
  }

  function deleteTask(taskToDelete: string) {
    const newTaskList = tasks.filter((task: string) => task !== taskToDelete);
    setTasks(newTaskList);
  }

  function editTask(taskToEdit: string) {
    setIsEditingTask(true);


    // the error occours below
    const editedTask = tasks.map((task: string) => {
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      task === taskToEdit ? { ...tasks, isEditingTask: !isEditingTask } : tasks;
    });

    setTasks(editedTask);
  }

  return (
    <div>
      <div
        className="p-4 bg-white rounded-lg shadow sm:p-6 md:p-8
            mx-auto max-w-full size-max mt-8 outline outline-zinc-400"
      >
        <Box
          onSubmit={(event) => saveTask(event)}
          component="form"
          sx={{
            '& > :not(style)': { m: 1, width: '25ch' },
          }}
          noValidate
          autoComplete="off"
          className=" flex justify-center items-center mt-1"
        >
          <TextField
            id="outlined-basic"
            label="Adicione uma tarefa"
            variant="outlined"
            name="task"
          />
          <button type="submit" className="h-8 max-w-max py-0">
            <CirclePlus className="text-green-400 p-0" />
          </button>
        </Box>
        <CustomizedTables
          tasks={tasks}
          deleteTask={deleteTask}
          editTask={editTask}
        />
        <ToastContainer autoClose={3500} />
      </div>
    </div>
  );
}

here is the component that renders the tasks

import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import { styled } from '@mui/material/styles';
import { FilePenLine, Trash2 } from 'lucide-react';
import * as React from 'react';

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  '&:nth-of-type(odd)': {
    backgroundColor: theme.palette.action.hover,
  },
  // hide last border
  '&:last-child td, &:last-child th': {
    border: 0,
  },
}));
interface Task {
  tasks: string[];
  deleteTask: (taskToDelete: string) => void;
  editTask: (taskToEdit: string) => void;
}

export default function CustomizedTables({
  tasks,
  deleteTask,
  editTask,
}: Task) {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 700 }} aria-label="customized table">
        <TableHead>
          <TableRow>
            <StyledTableCell>Tarefas</StyledTableCell>
            <StyledTableCell align="right">Ações</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {tasks.map((task) => (
            <StyledTableRow key={task}>
              <StyledTableCell component="th" scope="row">
                <div className="text-base font-sans font-medium">{task}</div>
              </StyledTableCell>

              <StyledTableCell align="center">
                <div className="flex-1 justify-end flex space-x-2">
                  <button onClick={() => editTask(task)}>
                    <FilePenLine className="text-sky-700" />
                  </button>
                  <button onClick={() => deleteTask(task)}>
                    <Trash2 className="text-red-700" />
                  </button>
                </div>
              </StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

can you reproduce my scenario with the code in the sandbox:
https://codesandbox.io/p/github/TarsooPaulo/Lista-de-Tarefas/main?embed=1&file=%2Fsrc%2Fcomponents%2FBody%2Findex.tsx