React - deleting items from array not rendering correctly. Wrong items remain displayed - reactjs

Question

I've created a simple react todo app, but I'm having an issue when deleting todo items in that they are remove from the array correctly being rendered incorrectly.
Example:
create 4 to do items; "one", "two", "three" "four"
select "one", "two" and delete these
the array returns "three" and "four" as expected however "one" and "two" still appear
this is the same for any number of selections in any order. The number selected always renders the first in the list i.e. don't delete 4 random out of 10 items and the first 4 items still remain in the list even if selected to remove.
the only scenario I can get to work is to select all and all delete as expected
I've seen some similar issues where people didn't have an id/index but I have this in place.
I use context to update the to do tasks, Tasks component to list all tasks and have Task component for each individual task.
When I console log the tasks from each of these they all return the correct result therefore I can't figure out how to fix the correct rendering.
Link to the react-app: https://dan-mca.github.io/todo-app/
The below are the main files but all files can are on https://github.com/dan-mca/todo-app/
Any help/pointers would be greatly appreciated. Thanks!
TasProvider.js
import React, {createContext, useState} from 'react';
export const TaskContext = createContext([])
const TaskProvider = (props) => {
const [tasks, setTasks] = useState([])
const [checkedTasks, setCheckedTasks] = useState([])
const addCheckedTask = task => setCheckedTasks([...checkedTasks, task])
const removeUncheckedTask = task => {
const index = checkedTasks.findIndex(el => el.id === task.id)
const checkedTasksCopy = [...checkedTasks]
checkedTasksCopy.splice(index,1)
setCheckedTasks(checkedTasksCopy)
}
const deleteTasks = (e) => {
if(e.target.innerText === 'Delete' || e.target.id === 'Delete') {
const filteredList = [...tasks].filter(task1 => ![...checkedTasks].find(task2 => task1.id === task2.id))
setTasks(filteredList)
}
}
const addTask = (task) => setTasks([...tasks, {id: tasks.length, taskText: task.taskText }])
console.log(tasks)
const data = {
tasks,
setTasks,
addCheckedTask,
removeUncheckedTask,
checkedTasks,
deleteTasks,
addTask
}
return (
<TaskContext.Provider value={data}>
{props.children}
</TaskContext.Provider>
)
}
export default TaskProvider;
Tasks.jsx
import React, { useContext, useState } from 'react'
import { TaskContext } from '../../context/TasksProvider';
import Task from '../Task/Task'
import { TasksContainer, TasksHeader, TasksParagraph, TasksList } from './Tasks.styled'
const Tasks = () => {
const taskContext = useContext(TaskContext)
console.log(taskContext.tasks)
return (
<TasksContainer >
<TasksHeader>Tasks</TasksHeader>
{ taskContext.tasks.length === 0 ?
<TasksParagraph>All tasks have been completed. Great job!</TasksParagraph>
:
<>
<TasksList >
{ taskContext.tasks.map((task) => (
<Task task={task} />
))
}
</TasksList>
<TasksParagraph>Tasks to complete: {taskContext.tasks.length}</TasksParagraph>
</>
}
</TasksContainer>
)
}
export default Tasks
Task.jsx
import React, { useState, useContext } from "react";
import { TaskContext } from "../../context/TasksProvider";
import { TaskItem, TaskEditIcon, TaskInput, TaskInputContainer, TaskInputLabel, TaskInputCheckbox } from './Task.styled'
const Task = (props) => {
const {task} = props;
const taskContext = useContext(TaskContext)
const [isClicked, setIsClicked] = useState(false)
const [taskText, setTaskText] = useState(task.taskText)
const handleClick = () => setIsClicked(!isClicked);
const handleChange = (e) => setTaskText(e.target.value);
const handleCheckboxclick = (e) => {
if (e.target.checked === true) {
taskContext.addCheckedTask({id: task.id, taskText})
} else if (e.target.checked === false) {
taskContext.removeUncheckedTask({id: task.id, taskText})
}
}
console.log(task)
return (
<TaskItem key={task.id}>
<TaskInputContainer>
{
isClicked ?
<TaskInput type="input" defaultValue={taskText} onChange={handleChange} id={task.id} />
:
<>
<TaskInputCheckbox type="checkbox" id={task.id} onClick={handleCheckboxclick}/>
<TaskInputLabel htmlfor={task.id}>{taskText}</TaskInputLabel>
</>
}
</TaskInputContainer>
<TaskEditIcon icon="clarity:edit-line" onClick={handleClick}/>
</TaskItem>
);
};
export default Task;