using LocalStorage to store data - react-hooks

Question

I am working on building an expense tracker using react. I want to save the entered inputs using localStorage. I have tried the below way but seems getItem() is not working as expected. The input is gone after refresh. Below is the code snippet
import React,{useState,useEffect} from "react";
import Expenses from "./components/Expenses";
import NewExpense from "./components/NewExpense/NewExpense";
const dummyExpenses = [
{
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),
},
{
id: "e5",
title: "internet",
amount: 400,
date: new Date(2021, 3, 12),
},
];
//Rendering items using localstorage.getItem
const local = localStorage.getItem('expenses')
? JSON.parse(localStorage.getItem('expenses'))
: dummyExpenses
const App = ()=>{
const [expenses,setExpenses] = useState(dummyExpenses,local);
const addExpenseHandler = expense =>{
setExpenses(prevExpenses=>{
return[expense,...prevExpenses];
});
//console.log('In App.js');
console.log(expense);
};
//saving items using localStorage
useEffect(() => {
localStorage.setItem('expenses', JSON.stringify(expenses))
}, [expenses])
return (
<div>
<NewExpense onAddExpense = {addExpenseHandler}/>
<Expenses items = {expenses}/>
</div>
);
}
export default App;
I am using getMonth() to filter the expenses month wise, and on just using local in useState is rendering the below error
'TypeError: expense.date.getMonth is not a function'
Expense component
import React, { useState } from "react";
import "./Expenses.css";
import ExpensesFilter from "./ExpenseFilter";
import ExpenseList from "./ExpenseList";
function Expenses(props) {
const [filteredMonth, setFilteredMonth] = useState(" ");
const FilterChangeHandler = (selectedMonth) => {
//console.log(selectedYear);
setFilteredMonth(selectedMonth);
};
const FilteredExpenses = props.items.filter((expense) => {
return expense.date.getMonth().toString() === filteredMonth;
});
return (
<div className="expenses">
<ExpensesFilter
selected={filteredMonth}
onChangeFilter={FilterChangeHandler}
/>
<ExpenseList items = {FilteredExpenses} />
</div>
);
}
export default Expenses;