Can't understand how to delete a specific TODO using handleDelete

I don't really understand how to get a id or indexOf from a windows prompt to use the handleDelete function.
Would I have to switch up the windowsprompt to a actual input field. Just feels like if there is a way to find a way to identify a specific windowsprompt I would be able to do this in a less amount of lines.
Thank you in advance!

import * as React from 'react';
import styled from 'styled-components';

const Container = styled.div``;
const Todo = styled.div`
  display: flex;
  align-items: center;
`;
const TaskTitle = styled.p`
  margin-right: 8px;
`;

const DeleteButton = styled.button``;

interface ITodo {
  taskName: string;
}
export default function App() {
  const [task, setTask] = React.useState<ITodo[]>([]);

  const handleDelete = () => {
    
  };

  const handleClick = () => {
    const promptResult = window.prompt('Enter name of new task');

    const newTask: ITodo = {
      taskName: promptResult,
    };

    setTask([...task, newTask]);
  };
  return (
    <Container>
      <button onClick={handleClick}>+</button>

      {task.map(({ taskName }) => {
        return (
          <Todo>
            <TaskTitle>{taskName}</TaskTitle>
            <DeleteButton onClick={handleDelete}>Delete</DeleteButton>
          </Todo>
        );
      })}
    </Container>
  );
}

For any given "task" the only information available is taskName. So if that's how a task is uniquely identified, pass that value to the delete handler:

<DeleteButton onClick={() => handleDelete(taskName)}>Delete</DeleteButton>

Then in the function you would receive that value and can use it to filter the list of tasks:

const handleDelete = (taskName: string) => {
  setTask(task.filter(t => t.taskName !== taskName));
};