Quiero cambiar el atributo central de <MapContainer> al hacer clic en el contenedor de entrenamiento. Actualmente tengo centro como coords iniciales.

 const [iniTialCoords, setInitialCoords] = useState(null); const [workouts, setWorkouts] = useState([]); const locateWorkout = () => { setWorkoutClicked(true); const findLocation = workouts.find((exercise) => { return exercise.id === workout.id }); setInitialCoords({ latitude: findLocation.coords.latitude, longitude: findLocation.coords.longitude }) } return( <div className = 'workout-container' onClick = {locateWorkout} key = {workout.id}> )

En el contenedor del mapa, configuro las coordenadas iniciales como mi ubicación geográfica. Quiero poder cambiar el centro cuando hago clic en el workout-container . Mi matriz de entrenamientos se ve así:

 useEffect(() => { if(navigator.geolocation){ navigator.geolocation.getCurrentPosition((position) => { setInitialCoords({ latitude: position.coords.latitude, longitude: position.coords.longitude }) }) } },[]) <MapContainer center={[iniTialCoords.latitude, iniTialCoords.longitude]} zoom={20}>