I'm currently using a ZoomableGroup with a CSS transition on transform to animate zooming and panning. It works great except for the fact that the map transitions on initialization from the zoom value 1 to my zoom value. As far as I can tell from useZoomPan, position.k is 1 during the first render and is then set to the actual zoom value in a useEffect resulting in a second render with the correct value which then causes the map to transition between the two zoom levels.

Would it be possible to use the zoom argument the first render as well? Would it be enough to just modify it like this?

const [position, setPosition] = useState({ x: lon, y: lat, k: zoom })