체크박스 관련 질문

import './App.css'
import Header from './components/Header';
import Editor from './components/Editor';
import { useState, useRef,useReducer } from 'react';
import List from './components/List';


const mockData=[
  {
    id:0,
    isDone: false,
    content : "React 공부하기",
    date: new Date().getTime(),
  },
  {
    id:1,
    isDone: false,
    content : "빨래하기",
    date: new Date().getTime(),
  },
  {
    id:2,
    isDone: false,
    content : "노래 연습하기",
    date: new Date().getTime(),
  },
];

function reducer(state,action){
  switch(action.type){
    case 'CREATE': return [action.data, ...state];
    case 'UPDATE':
      return state.map((item)=>item.id===action.targetId?{...item, isDone: !item.isDone}:item);
      case "DELETE":
        return state.filter((item)=>item.id !==action.targetId);
        default:
          return state;
  }

}

function App() {
  // const [todos,setTodos]=useState(mockData);
  const [todos,dispatch]=useReducer(reducer,mockData);
  const idRef=useRef(3);

  const onCreate=(content)=>{
    dispatch({
     type:"CREATE",
     data:{
       id:idRef.cureent ++,
       isDone:false,
       content: content,
       date: new Date().getTime(),
     },
    });
     };

  const onUpdate=(targetId)=>{
    dispatch({
      type:"UPDATE",
      targetId:targetId
    })
};

const onDelete=(targetId)=>{
  dispatch({
    type:"DELETE",
    targetId:targetId
  });
};

  return ( 
  <div className="App">
  <Header />
  <Editor onCreate={onCreate} />
  <List 
  todos={todos} 
  onUpdate={onUpdate} 
  onDelete={onDelete} />
  </div>
  );
}

export default App

강의 10.2를 보던 중 '123'을 리스트에 추가하고 체크박스를 누르는 과정에서 체크박스와 삭제 버튼이 작동하지 않습니다. 
기존에 있던 리스트들은 체크와 삭제가 다 되는데 추가된 리스트에 대해서만 작동하지 않는데 틀린 부분이 있는지 궁금합니다.