How to enable a button with useRef() in reactJs - reactjs

Question

I created a Todo-list app in react
and inside each item placed one radio button and one edit, delete button for each and every item when a user enters in the input text.
Basically, the edit, delete buttons are disabled at first.
when a user clicks on the radio button then the particular item buttons get enabled.
But here I am getting all the buttons in each item gets enabled inside the list
import React,{useState} from 'react';
import Modal from 'react-modal';
import {AiFillDelete,AiFillEdit} from 'react-icons/ai';
import './App.css';
Modal.setAppElement('#root')
function App() {
const [todos,setTodos] = useState([{id:0,text:"item1"},{id:1,text:"item2"}])
const [todo,setTodo] = useState("")
const [todoEditing,setTodoEditing] = useState(null)
const [editingText,setEditingText] = useState("")
const [deleteItem,setDeleteItem] = useState()
const [editItem,setEditItem]=useState()
const [modalIsOpen,setModalIsOpen] = useState()
function handleSubmit(e){
e.preventDefault()
const newTodo = {
id:todos.length,
text : todo,
}
setTodos([newTodo].concat(...todos))
setTodo("")
}
function deleteTodo(id){
const updateTodos = [...todos].filter((todo)=>todo.id !== id)
setTodos(updateTodos)
}
function editTodo(id){
const updateTodos = [...todos].map((todo) => {
if(todo.id===id){
todo.text = editingText
}
return todo
})
setTodos(updateTodos)
setTodoEditing(null)
setEditingText("")
}
const handleRadioBtnItem = (event) =>{
setDeleteItem(event.target.value);
setEditItem(event.target.value);
}
return (
<div className="App">
<div className='todo-head'>
<h1 className='ForHeading'>Todo List</h1>
<form onSubmit={handleSubmit}>
<input className='User-Input' type='text' onChange={(e)=>setTodo(e.target.value)} value={todo}/>
<button className='Add-Btn' type='submit' disabled={!todo}>Add Todo</button>
</form>
</div>
{todos.map((todo)=>
<ul className='ul-Style' key={todo.id} id={todo.id}>
<input className='Rdo' type='radio' onClick={handleRadioBtnItem}/>
{todoEditing === todo.id ?
(
<div>
<Modal
isOpen={modalIsOpen}
shouldCloseOnOverlayClick={false}
style={
{
overlay:{
backgroundColor:'gray'
},
content:{
textAlign:'center'
}
}
}
>
<h2>Edit Items</h2>
<input type='text' onChange={(e)=> setEditingText(e.target.value)} value={editingText}/>
<div>
<button onClick={()=>editTodo(todo.id)} disabled=''>Save</button>
<button onClick={()=>setModalIsOpen(false)}>Close</button>
</div>
</Modal>
{todo.text}
</div>
)
:
(
<p>{todo.text}</p>
)
}
<button
className='Edit-Btn'
onClick={()=>{setTodoEditing(todo.id);setModalIsOpen(true)}}
disabled={!editItem}><AiFillEdit/>
</button>
<button
className='Del-Btn'
onClick={()=>deleteTodo(todo.id)}
disabled={!deleteItem}><AiFillDelete/>
</button>
</ul>)}
</div>
);
}
export default App;