Tengo este error "Expenses.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'Items')" en un proyecto de reacción en el que estoy trabajando y no estoy seguro de por qué lo sigo recibiendo. Soy completamente nuevo en REACT. Cualquier ayuda es muy apreciada

Aquí está mi código para los archivos.

Aplicación.js

 import Expenses from "./components/Expenses"; function App() { const expenses = [ { id: "e1", title: "Toilet Paper", amount: 94.12, date: new Date(2020, 7, 14), }, { id: "e2", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12) }, { id: "e3", title: "Car Insurance", amount: 294.67, date: new Date(2021, 2, 28), }, { id: "e4", title: "New Desk (Wooden)", amount: 450, date: new Date(2021, 5, 12), }, ]; return ( <div> <h2>Let's get started!</h2> <Expenses Items={expenses} /> </div> ); } export default App;

Gastos.js

 import ExpenseItem from "./ExpenseItem"; import "./Expenses.css"; function Expenses(props) { return ( <div className="expenses"> <ExpenseItem title={props.Items[0].title} amount={props.Items[0].amount} date={props.Items[0].date} /> <ExpenseItem title={props.Items[1].title} amount={props.Items[1].amount} date={props.Items[1].date} /> <ExpenseItem title={props.Items[2].title} amount={props.Items[2].amount} date={props.Items[2].date} /> <ExpenseItem title={props.Items[3].title} amount={props.Items[3].amount} date={props.Items[3].date} /> </div> ); } export default Expenses();