React Leaflet - Update map center - reactjs

Question

I'm using React Leaflet. I have a map and an array with names and corresponding positions. Every name from the array is a button. When I click on a name the position changes and should be updated in the map. That works with the marker but not with the section of the map. How can I update also the section of the map?
const data = [
{
name: 'John',
coordinates: {
langitude: '40.72260370101827',
latitude: '-73.99323791583221',
},
},
{
name: 'Bob',
coordinates: {
langitude: '40.72843542344666',
latitude: '-73.94860440141105',
},
},
{
name: 'Chris',
coordinates: {
langitude: '40.79159996340942',
latitude: '-73.94077957876242',
},
},
];
export default function Map(props) {
const { index, data } = props;
return (
<MapContainer
center={[
data[index].coordinates.langitude,
data[index].coordinates.latitude,
]}
zoom={16}
>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
></TileLayer>
<Marker
position={[
data[index].coordinates.langitude,
data[index].coordinates.latitude,
]}
>
<Popup>{data[index].name}</Popup>
</Marker>
</MapContainer>
);
}

Answer 1

Here's a complete description for this issue in: another thread. Basically the center prop (and all other props, except children) of MapContainer is immutable, so you need to use the provided methods as explained in the answer above.However, here's a quick fix I thought of:
<MapContainer
key={JSON.stringify([data[index].coordinates.langitude, data[index].coordinates.latitude])}
center={[
data[index].coordinates.langitude,
data[index].coordinates.latitude,
]}
zoom={16}
>
Only addition to your code is the key prop, which takes the stringified center position. So when the position changes, another instance of the MapContainer component is created (a fresh copy ;) ), having the proper center value.

Answer 2

From the official docs:
Except for its children, MapContainer props are immutable: changing
them after they have been set a first time will have no effect on the
Map instance or its container.
As a result you have to create a custom component that changes the map view upon coordinate change
function SetViewOnClick({ coords }) {
const map = useMap();
map.setView(coords, map.getZoom());
return null;
}
Use it a child of MapContainer below your Marker comp by passing the coorinates as a prop.
<SetViewOnClick
coords={[
data[index].coordinates.langitude,
data[index].coordinates.latitude
]}
/>
Once the updated index is received map's view will be changed.
Demo