Tengo un problema cuando trato de presentar una lista de países que obtengo de la matriz de personas que tengo de localStorage.

Cuando actualizo la página, no recibo la lista, pero cuando cambio algo en mi código y lo guardo, sí obtengo la lista.

He agregado el código, me refiero a la función getCountries dentro de useEffect donde obtengo todos los países, obtengo una matriz única que los ordena y luego los guardo en el estado.

agradezco cualquier ayuda

 import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { loadPeople, removePerson, setFilterBy } from '../cmps/store/people.action.js'; import { PeopleList } from '../cmps/PeopleList'; import Filters from '../cmps/Filters.jsx'; export const RecipePage = () => { const [currentPage, setCurrentPage] = useState(1); const [postsPerPage] = useState(6); const [countries, setCountries] = useState([]); const peoples = useSelector((state) => state?.peopleModule?.peoples); const dispatch = useDispatch(); useEffect(() => { const getCountries = async () => { const countryArray = await peoples.map((person) => { return person.location.country; }); const uniqueCountryArray = [...new Set(countryArray)]; const sortedArray = uniqueCountryArray?.sort((a, b) => a.localeCompare(b)); setCountries(sortedArray); }; getCountries(); }, []); useEffect(() => { dispatch(loadPeople()); }, []); const onHandleRemovePerson = (id) => { dispatch(removePerson(id)); }; const onChangeFilter = (filterBy) => { dispatch(setFilterBy(filterBy)); dispatch(loadPeople()); }; return ( <> <div className='main-layout'> <Filters countries={countries} onChangeFilter={onChangeFilter} /> <PeopleList peoples={currentPost} onHandleRemovePerson={onHandleRemovePerson} /> <Pagination postsPerPage={postsPerPage} totalPosts={peoples.length} paginate={paginate} /> </div> </> ); };