Unknown require error in javascript/react js

I am learning react js with the help of scrimba. I created a component called TodoItem.js with the following code:

import React from "react"

    function TodoItem() {
        return (
            <div>
                <input type="checkbox" />
                <p>Placeholder text here</p>    
            </div>
        )
    }
    
    export default TodoItem

Whenever I try using it in App.js I am getting the error

Unknown require: ./components/Todoitem (in module /App.js) (/App.js:5)

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

App.js:

import React from "react"
import TodoItem from "./components/Todoitem"

function App() {
    return (
        <div>
            <TodoItem />
            <TodoItem />
            <TodoItem />
            <TodoItem />
        </div>
    )
}

export default App

Index.js:

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

ReactDOM.render(
    <App />, document.getElementById("root")
)

What is the error here?

Kindly comment if more information is needed.

>Solution :

You simply made a mistake in the import:
Wrong: import TodoItem from "./components/Todoitem"
Correct: import TodoItem from "./components/TodoItem"