flyTo of react leaftlet working while setView is not react leaflet

Question

I'm building this "Contacts" page that gets some locations from supabase displays them on the map and at the same time displays their information in a ul. Now everytime the user clicks on a li element the map should get recentered on that marker on the map, same thing if the user clicks on one of the markers. When the Contatti component renders, if i directly click on one of the li elements everything recenters perfectly, but for example if I first click on a marker and then i try to click on a li it breaks for some reason, and the map seems to move but only a little bit. For example if i click 2 times on a component then everything works fine again. Right now i'm using the flyTo method instead of setView and everything works fine, in every scenario. The component is pretty messy, I'll refactor it soon. Sorry for that.

import { Link } from 'react-router-dom';
import { useSedi } from '../features/contatti/useSedi';
import { useContatti } from '../features/contatti/useContatti';
import Spinner from '../ui/Spinner';
import { objectToArray } from '../utils/returnObjToArray';
import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { useEffect, useState } from 'react';

function ChangeView({ center }) {
  const map = useMap();

  useEffect(() => {
    map.setView(center);
  }, [map, center]);

  return null;
}

function Contatti() {
  const { sedi, status: statusSedi } = useSedi();
  const [sedeSelected, setSedeSelected] = useState(null);
  const { data, status: statusContatti } = useContatti();
  const [mapCenter, setMapCenter] = useState(
    sedi ? [sedi[1].location.lat, sedi[1].location.lng] : [40.819409, 16.41785],
  );
  if (statusContatti === 'pending' || statusSedi === 'pending')
    return <Spinner />;

  const [contatti] = data;
  const { created_at, id, ...infoContatti } = contatti;

  const infoContattiArray = objectToArray(infoContatti);
  console.log(mapCenter);

  return (
    <div className="flex h-full w-full flex-col justify-center bg-yellow-400">
      <div className="flex h-5/6 w-full justify-center space-x-12 bg-red-300 px-6 py-4">
        <div className="flex h-full w-4/12 flex-col justify-between  bg-yellow-300">
          <Link className="h-1/4 w-full bg-red-400" to="/prenotazioni/prenota">
            PRENOTA ORA!
          </Link>
          <ul className="h-2/5 bg-red-500">
            CONTATTACI
            {infoContattiArray.map((contattoObj) =>
              Object.entries(contattoObj).map(([key, value]) => (
                <li key={key}>
                  <strong>{key}: </strong>
                  {value}
                </li>
              )),
            )}
          </ul>
          <ul className=" w-full divide-y-2 bg-green-500">
            <h2>Le nostre sedi</h2>
            {sedi.map((sede) => (
              <li
                key={sede.id}
                className={`flex flex-col hover:cursor-pointer ${sedeSelected === sede.id ? 'bg-green-700' : ''}`}
                onClick={() => {
                  setMapCenter(Object.values(sede.location));
                  setSedeSelected(sede.id);
                }}
              >
                <span> {sede.via}</span>
                <span> {sede.nome}</span>
              </li>
            ))}
          </ul>
        </div>
        <div className="w-7/12 bg-yellow-400">
          <MapContainer scrollWheelZoom={true} zoom={12} center={mapCenter}>
            <TileLayer
              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <ChangeView center={mapCenter} zoom={13} />
            {sedi.map((sede) => {
              return (
                <Marker
                  position={Object.values(sede.location)}
                  key={sede.id}
                  eventHandlers={{
                    click: () => {
                      setMapCenter(Object.values(sede.location));
                      setSedeSelected(sede.id);
                    },
                  }}
                >
                  <Popup>{sede.nome}</Popup>
                </Marker>
              );
            })}
          </MapContainer>
        </div>
      </div>
    </div>
  );
}

export default Contatti;

Tried debugging and the state seems to update perfectly. One thing i noticed is that when clicking on a marker first and then on the li element and checking the map the _animateToCenter changes but to values a little different from the ones of the last mapCenter. Anyone knows what I could be doing wrong? Thank you a lot!