mui checkbox doesn't changed after click it

i'm making todolist by using mui components. and i made ContextAPI so i can bring data and reducer. bring the data is not a problem. but, when i click the list item, checkbox doesn't change.

data structure (initialState)

  {
        id:1,
        text: 'hi',
        done: true,
    }

reducer action.type(TOGGLE)

 case 'TOGGLE':
            return state.map(
                todo => todo.id === action.id? {...todo, done: !todo.done}:todo,
                console.log("toggle complete")
                );
                

  const todos = useTodoState(); //initialState
  const dispatch = useTodoDispatch(); //dispatch

using dispatch

 const onToggle =() => dispatch({
    type:'TOGGLE',
    id:todos.id,
    
  })

mui checkbox component

 <Checkbox
      edge="start"
      onClick={onToggle}
      checked={todo.done}
      disableRipple
   />

i added console.log when i clicked item. it pops up but checkbox's checked state is not changed.