【React】エラー表示 『'TodoItem' is not defined.』を改善したい

reactで、reduxを使い、todolistを作成しています。

『'TodoItem' is not defined』 という表示を改善したいです。

ERROR in src/components/DisplayTodos.js
  Line 39:20:  'TodoItem' is not defined  react/jsx-no-undef
  Line 54:20:  'TodoItem' is not defined  react/jsx-no-undef
  Line 68:18:  'TodoItem' is not defined  react/jsx-no-undef

試したこと 『'TodoItem' is not defined』 上記のエラー文を検索して、タグの設定がエラーの原因と仮説を立てたのですが、 どのように解決したらよくわかりません。何方かアドバイスをお願いします。

//src/components/DisplayTodos.js

import React, { useState } from "react";

import { connect } from "react-redux";
import {
  addTodos,
  completeTodos,
  removeTodos,
  updateTodos,
} from "../redux/reducer";

const mapStateToProps = (state) => {
  return {
    todos: state,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    addTodo: (obj) => dispatch(addTodos(obj)),
    removeTodo: (id) => dispatch(removeTodos(id)),
    updateTodo: (obj) => dispatch(updateTodos(obj)),
    completeTodo: (obj) => dispatch(completeTodos(obj)),
  };
};

const DisplayTodos = (props) => {
  const [sort, setSort] = useState("active");
  return (
    <div className="displaytodos">
      <div className="buttons">
        <button onClick={() => setSort("active")}>Active</button>
        <button onClick={() => setSort("completed")}>Completed</button>
        <button onClick={() => setSort("all")}>All</button>
      </div>
      <ol>
        {props.todos.length > 0 && sort === "active"
          ? props.todos.map((item) => {
              return (
                item.completed === false && (
                  <TodoItem
                    key={item.id}
                    item={item}
                    removeTodo={props.removeTodo}
                    updataTodo={props.updataTodo}
                    completeTodo={props.completeTodo}
                  />
                )
              );
            })
          : null}
        {props.todos.length > 0 && sort === "completed"
          ? props.todos.map((item) => {
              return (
                item.completed === true && (
                  <TodoItem
                    key={item.id}
                    item={item}
                    removeTodo={props.removeTodo}
                    updataTodo={props.updataTodo}
                    completeTodo={props.completeTodo}
                  />
                )
              );
            })
          : null}
        {props.todos.length > 0 && sort === "all"
          ? props.todos.map((item) => {
              return (
                <TodoItem
                  key={item.id}
                  item={item}
                  removeTodo={props.removeTodo}
                  updataTodo={props.updataTodo}
                  completeTodo={props.completeTodo}
                />
              );
            })
          : null}
      </ol>
    </div>
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(DisplayTodos);