尝试在react中构建一个待办事项列表应用程序我正在学习React JS的教程，一切都很好，但在浏览器控制台中出现以下错误，有人能解释一下帮助我解决这个问题吗，我是新的react。

index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:24.
    at App (http://localhost:3000/static/js/main.chunk.js:172:83)
console.<computed> @ index.js:1
react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

• • 索引. js**

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

• • 应用程序js**

import { useState } from 'react';
import './App.css';
import InputArea from './components/InputArea';
import ToDoItem from './components/ToDoItem';

function App() {
  const [items, setitems] = useState([]);

  const additems = (inputText)=>{
    setitems((prevItems)=>{
      return [...prevItems,inputText];
    });
  };

  return (
    <div className="container">
      <div className="heading">
      <h1>ToDo App</h1>
      </div>
      <InputArea additems={additems} />
      <div>
        <ul>
          {items.map((item, index )=> {
            return <ToDoItem key={index} text={item} />;
            })}
        </ul>
      </div>
    </div>
  );
}

export default App;

在我添加ToDoItemsToDoItems. js之前，它工作正常

import React from 'react'

const ToDoItem = (props) => {
    return (
        <div>
            <li>{props.text}</li>
        </div>
    )
}

export default ToDoItem

• • 输入区域. js代码**

import React, {useState} from 'react';

const InputArea = (props) => {
    const [inputtext,setinputtext]= useState("");

    const handleChange = (event)=>{
        setinputtext(event.target.value);
    };

    return (
        <div className="form">
            <input type="text" onChange={handleChange} value={inputtext} />
            <button
            onClick={()=>{
                props.additems(inputtext);
                setinputtext("");
            }}
            >
                <span>Add</span>
            </button>
            
        </div>
    ) 
}

export default InputArea