Estoy aprendiendo React y haciendo la práctica de la lista Todo en estos días, aquí está mi código:

 import React, {useState} from 'react' export default function App() { const[test, setTest] = useState('') const[list, setList] = useState(['aa','bb','cc']) const handleChange = (evt) =>{ setTest(evt.target.value) } const handleAdd = () =>{ setList([...list, test]) setTest('') } const handleDelete = (index) =>{ var newlist = [...list] newlist.splice(index,1) setList(newlist) } return ( <div> <input onChange={handleChange} value={test}/> <button onClick = {handleAdd}>add</button> <ul> {list.map((item,index)=> <li key={index}> {item} <button onClick={()=>{ handleDelete(index) }}>delete</button> </li>)} </ul> </div> ) }

Sé que es una pregunta estúpida, pero estaba tan confundido que no puedo escribir la última función onClick de esta manera:

 <button onClick={handleDelete(index)}>delete</button>

¿Cuál es el papel de la función anónima?

Gracias por su paciencia.