i want to change the center attribute of <MapContainer> when clicking the workout-container. I currently have center as initial coords.

 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}>
)

In the map container I setup initial coords as my geo-location. I want to be able to change the center as I click the workout-container. My workouts array looks like this:

 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}>