React native component rerender when using context api - reactjs

Question

I'm currently learning React Native. I have an aplication that is used to track expenses and I'm setting some dummy data as initial state. The app works fine, I can add new expenses, edit and delete them. Also, I have a component that is showing recent expenses for the last 7 days only.
Today I noticed that my recent list was empty, because all of the expenses were older than the last 7 days, so I changed the dates of a few items so I would have some data on initial load.
After saving the changes, I noticed that the app refreshed, but the state didn't, I still had an empty list. Only when I forced the reload of the app, the state was updated.
So my question is, is this intended? Should the component rerender after I manually change the initial state or not? I couldn't find any similar issues and also I couldn't find anything in the docs.
Here's my context code:
import { createContext, useReducer } from 'react';
const DUMMY_EXPENSES = [
{
id: 'e1',
description: 'A pair of shoes',
amount: 59.99,
date: new Date('2021-12-19'),
},
{
id: 'e2',
description: 'A pair of trousers',
amount: 89.29,
date: new Date('2022-01-02'),
},
{
id: 'e3',
description: 'Bananas',
amount: 19.99,
date: new Date('2023-02-06'),
},
{
id: 'e4',
description: 'Book',
amount: 69.69,
date: new Date('2023-02-05'),
},
];
export const ExpensesContext = createContext({
expenses: [],
addExpense: ({ description, amount, date }) => {},
deleteExpense: (id) => {},
updateExpense: (id, { description, amount, date }) => {},
});
function expensesReducer(state, action) {
switch (action.type) {
case 'ADD':
const id = new Date().toString() + Math.random().toString();
return [{ ...action.payload, id: id }, ...state];
case 'UPDATE':
const expenseIndex = state.findIndex((e) => e.id === action.payload.id);
const expenses = [...state];
expenses[expenseIndex] = { id: action.payload.id, ...action.payload.data };
return expenses;
case 'DELETE':
const expenseArray = [...state];
return expenseArray.filter((e) => e.id !== action.payload);
default:
return state;
}
}
export default function ExpensesContextProvider({ children }) {
const [expenses, dispatch] = useReducer(expensesReducer, DUMMY_EXPENSES);
function addExpense(expenseData) {
dispatch({ type: 'ADD', payload: expenseData });
}
function deleteExpense(id) {
dispatch({ type: 'DELETE', payload: id });
}
function updateExpense(id, expenseData) {
dispatch({ type: 'UPDATE', payload: { id: id, data: expenseData } });
}
const value = {
expenses: expenses,
addExpense: addExpense,
updateExpense: updateExpense,
deleteExpense: deleteExpense,
};
return <ExpensesContext.Provider value={value}>{children}</ExpensesContext.Provider>;
}