Фильтровать массив и вернуть объект в глобальное состояние с помощью React-Redux

Question

Я создал простой пример с React. Теперь я хочу показать всплывающее окно, когда я щелкнул элемент To-Do.

Я хранил элементы To-Do в глобальном состоянии

var initialState = {
      toDoList:[
        {id:1,title:"ToDo-1",description:"Desp-1",Date:"2020-02-12 00:00:01",bg:"primary",active:true,},
        {id:2,title:"ToDo-2",description:"Desp-2",Date:"2020-02-13 00:00:01",bg:"light",active:false,}
      ],
      editingItem:{},
}

export function app(state = initialState, action) {
  switch (action.type) { 
    case "GET_ITEM":
      console.log("id -> " + action.id);
      const filteredData=state.toDoList.filter((item)=>item.id===action.id);
      return Object.assign({},state,{editingItem:filteredData})  
    default:
      return state
  }
}

В main. js file

export default function ToDo(props) {
   const app = useSelector(state => state.app);
   const dispatch = useDispatch();

    function ItemClicked(key,e){
      dispatch({ type: "GET_ITEM", id: key });
      console.log(app.editingItem);  
    }

    function CreateList(){
     return app.toDoList.map((item) => (
            <Card key={item.id} onClick={(e)=>(ItemClicked(item.id,e))}>
                <Card.Body>
                   {item.title}
                </Card.Body>
            </Card>
     ))
    }

   return (
     {CreateList()}
    )
}

Когда я нажимаю на To-Do, вывод элемента консоли вот так

id -> 1 {} id -> 2 {id: 1, заголовок: "ToDo-1", описание: "Desp-1", дата: "2020-02-12 00:00:01", bg: "primary", active: true,}, id -> 2 {id: 2, заголовок: «ToDo-2», описание: «Desp-2», дата: «2020-02-13 00:00:01», bg: «light», active: false,}

В фильтруемом выходе всегда есть задержка. Я вижу предыдущий пункт. В чем проблема? Должен ли я использовать обратный вызов для отправки? Если да, то как я могу использовать обратный вызов?