Problem with a component no re-rendering in a React app

I am learning React and I am currently working on a simple weather app as a way to practice. It works fine but I have been stuck on a problem for quite a while now.

The app has 2 pages (using react-router-dom), a home page with an input form to look for a city (using api.mapbox.com). When a city is clicked from the results list, there is a preview of the city weather (api.openweathermap.org), then the user can click on a + button to save this city (using local storage). The saved cities are showing as cards on the home page. It is possible to remove a city from the saved cities using a button at the bottom of the weather page. It simply removes the city from the array stored in the local storage, then it redirects to the home page.

The problem is that I still see the “removed” city card after the redirection, I have to refresh the page to see it removed. I think I need to use the useEffect hook to re-render the city list after having the city removed, but I can’t get it to work. I am missing something, but can’t figure out what.
Below is my CityList.jsx component, the one that renders the saved cities of the home page :

import { CityListCard } from "./CityListCard";

let savedCities

const getCities = async () => {
    if (localStorage.getItem('savedCities')) {
        savedCities = JSON.parse(localStorage.getItem('savedCities'))
        const OWMAppId = 'xxxxxxxxxxxxxxxxxxxxx'
        const units = 'metric'
        const langapi = 'en'

        savedCities.map(async (city, index) => {
            const response = await fetch(`https://api.openweathermap.org/data/3.0/onecall?lat=${city.coords.lat}&lon=${city.coords.lng}&exclude={part}&appid=${OWMAppId}&units=${units}&lang=${langapi}`, {
                headers: {
                    'Accept': 'application/json; charset=UTF-8'
                }
            })
            const data = await response.json()
            savedCities[index].weather = data
        })
    }
}

await getCities()

export function CityList() {
    return <div className="flex flex-col gap-4">
        {savedCities &&
            savedCities.map(city => (
                <CityListCard key={city.id} city={city} />
            ))
        }
    </div>
}

I think I have to add a useEffect with a dependency on savedCities, but as a hook cannot be inside a function, I don’t know how to make it work.

Any help appreciated