Creé una aplicación de reacción, estoy pasando una matriz de objetos que se representan en la interfaz de usuario, cuando le agrego un elemento usando useState, el elemento se agrega pero no se representa en la interfaz de usuario, estoy agregando el jsx código de referencia, necesito una sugerencia sobre lo que está causando el problema.

Aplicación.jsx

 import logo from "./logo.svg"; import "./App.css"; import Expense from "./components/ExpenseComponent/Expense"; import NewExpense from "./components/AddExpenseComponent/NewExpense"; import React,{useState} from "react"; const expenseItem = [ { title: "furniture", amount: 568, date: new Date(2022, 2, 23) }, { title: "books", amount: 30, date: new Date(2022, 2, 24) }, { title: "Electronics", amount: 468, date: new Date(2022, 2, 23) }, { title: "sports", amount: 340, date: new Date(2022, 2, 24) }, { title: "virtual media", amount: 268, date: new Date(2022, 2, 23) }, ]; const App=()=> { const[expenses,newExpenseItem] = useState(expenseItem); const addExpense = (expense) =>{ newExpenseItem((prevExpense) =>{ return [expense,...prevExpense]; }); }; return ( <div id="root"> <NewExpense addExpenseToArray={addExpense}/> <Expense items={expenseItem} /> </div> ); } export default App;

Gastos.jsx

 import "../ExpenseComponent/Expense.css"; import ExpenseItem from "../ExpenseComponent/ExpenseItem"; import ExpenseFilter from "../AddExpenseComponent/ExpenseFilter"; export const Expense = (props) => { //let item = props.items; const getYear = (targetYear) => { console.log(targetYear); //console.log(item); }; return ( <div className="expenses"> <ExpenseFilter getTargetYear={getYear} /> {props.items.map((expense) => ( <ExpenseItem title={expense.title} amount={expense.amount} date={expense.date} /> ))} </div> ); }; export default Expense;

NewExpense.jsx

 import React from "react"; import ExpenseForm from "./ExpenseForm"; import "./NewExpense.css"; const NewExpense = (props) => { const getNewExpenseData = (newExpenseData) => { //const expenseData = newExpenseData; props.addExpenseToArray(newExpenseData); //console.log(expenseData); }; return ( <div> <div className="new-expense"> <ExpenseForm getExpenseData={getNewExpenseData} /> </div> </div> ); }; export default NewExpense;