use separate component for reacting to specific observable

src/App.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 import { observer } from 'mobx-react-lite';
-import { TodoList } from './state';
+import { TodoList, Todo } from './state';
 
 const App = observer(({ todos }: { todos: TodoList }) => {
   return (
@@ -21,7 +21,16 @@ const App = observer(({ todos }: { todos: TodoList }) => {
           Learn React
         </a>
         {todos.todos.map((todo, index) => (
-          <div key={index}>
+          <TodoListItem key={index} todo={todo} />
+        ))}
+      </header>
+    </div>
+  );
+});
+
+const TodoListItem = observer(({ todo }: { todo: Todo }) => {
+  return (
+    <div>
       <input
         type="checkbox"
         checked={todo.done}
@@ -29,9 +38,6 @@ const App = observer(({ todos }: { todos: TodoList }) => {
       />
       {todo.name}
     </div>
-        ))}
-      </header>
-    </div>
   );
 });