ReactJS removing item from array removes all other elements

Question

Following my app.js

import Form from "./Containers/Form";
import { useState, useCallback } from "react";
import List from "./Containers/List";

function App() {
let [items,setItems] = useState([]);
const handleAdd = useCallback((item)=>{
    let newItems=[...items,item];
        setItems(newItems)
},[items])
const onEdit=useCallback((odlv,newv)=>{
        let newItems=items.map((item)=>{
            if(item===odlv){
                return newv;
            }
            return item
        });
        setItems(newItems)

},[items]);

const onDelete=(odlv)=>{
    console.log("old",odlv)
    let newItems=items.filter((item)=>{
        return (item!==odlv)
    });
    setItems(newItems)
}
return ( <div className = "container" >
                <Form onAdd={handleAdd}/>
                <List items={[...items]} onEdit={onEdit} onDelete={onDelete} />
        </div >
);
}

  export default App;

And my list item.js

import InputBox from "./InputBox"

import { useMemo, useState, useCallback } from "react"

export default function Item(props){
        let [edit,setEdit]=useState(false)
        let [taskDetail,setTaskDetail]=useState(props.item)
        let [error,setError]=useState('')
        let handleSave=useCallback(()=>{
            if(taskDetail==''){
                setError('Please Enter Task Details')
            }else{
                if(taskDetail!==props.item)
                {
                    setError('')
                    props.onEdit(props.item,taskDetail)
                    setEdit(false)
                }
            }

        },[edit,taskDetail,error])


        const handleTaskUpdate=useCallback((e)=>{
            setTaskDetail(e.target.value)
        },[])

        let [titleDisplay,editButton,deleteButton]=useMemo(()=>{
            if(edit){
                return [<InputBox value={taskDetail} error={error} onChange={handleTaskUpdate}
                />,<button onClick={handleSave} className='btn btn-success '>Save</button>,<button onClick={()=>{setEdit(false)}} className='ms-1 btn btn-danger'>Cancel</button>]
            }
            return [<h5>{props.item}</h5>,<button onClick={()=>setEdit(true)} className='btn btn-secondary '>Edit</button>,<button className='ms-1 btn btn-danger' onClick={()=>{props.onDelete(taskDetail)}}>Delete</button>];
        },[edit,taskDetail,error])

        return<li className='list-group-item'>
                <div className='row'>
                        <div className='col-md-6'>{titleDisplay}</div>
                        <div className='col-md-6'>
                            {editButton}{deleteButton}
                        </div>
            </div>
            
        </li>
  }

When I click on delete, it works fine for last node deletion but when middle node is deleted it removed all other node expect the first one like try adding A, B, C, D remove D will work fine but remove B will remove C and D

What's going wrong?