Toto app in React JS

//in App.js file
import './App.css';
import {useState} from 'react';
import {Tasks} from './Tasks'
let globalCount = 0
function App(props){
    const [task,setTask] = useState('')
    const [todos,setTodos] = useState([])

    function addTodo(){
        const newTask ={name:task,id:globalCount++,completed:false}
        setTodos([...todos,newTask])
    }

    function deleteTask(id){

        setTodos(todos.filter((item)=>id!==item.id))

    }

    function updateTask(id){
        setTodos(
            todos.map((item)=>{
                if(item.id == id){
                    return {...item,completed:true}
                }else{
                    return item
                }
            })
            )
    }
    return(
        <div className="App" style={{marginTop: "20px"}} >
        <input type="text" style={{width:"200px",padding:"5px"}} onChange={(event)=>setTask(event.target.value)} />
        <button onClick={addTodo} style={{padding:"5px"}}>Add Task</button>
        {todos.map((item)=><Tasks task={item.name} id={item.id} delete={deleteTask} update={updateTask} completed={item.completed}/>)}
        </div>
    )
}

export default App;

//in Tasks.js file
export const Tasks =(props)=>{
    return (
    <div>
        <li style={{fontWeight:props.completed?"bold":null}}>
            {props.task}
        </li>
        <button onClick = {()=>props.delete(props.id)}>Delete</button>
        <button onClick = {()=>props.update(props.id)}>Update</button>
    </div>
    )
}