How do I get from current behaviour to desired behaviour? Relevant code in the images attached, happy to provide more context!

Desired behaviour: I am trying to build a google maps clone (ish). When I select a location on the map, the map should open a sidebar with information about that location, and smoothly pan to centre on the location. I also want the content associated with each location (which is stored in Postgres) to be SEO friendly. Ideally selecting the location would change to a URL specific to that location and pan the map at the same time.

Current Behaviour: I have a map (Leaflet.js) which is a client side component using useLayoutEffect. I can select locations on the map. When I select them (see code) I currently dynamically route to /topic/[topicName] , where my /topic/[topicName]/page.tsx file uses generateStaticParams and fetch() to store the information about each location in an SEO friendly way, and then I return the content in a sidebar, as well as loading the Leaflet map beneath it. The issue is that this reloads the map every time I select a new location, which is a terrible experience, but it was my best attempt so far.