State not Rendering to UI, Element is added in array

I have created a react application, I am passing an array of object that renders in the UI , When I am adding an element to it using useState, the element is added but it doesn't render in the UI, I am adding the jsx code for reference, I need a suggestion on what is causing the issue.

App.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;

Expense.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;