[Need help] Multi-image zoom not working.

[themagicalmammal]

Describe the bug
Trying to get multi-image zoom at the same time but it isn't working

To Reproduce
Try this code out.

import React, { useState } from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

export default function SideBySideSyncView() {
  const [scale, setScale] = useState(1);
  const [positionX, setPositionX] = useState(0);
  const [positionY, setPositionY] = useState(0);

  function update(stats: any) {
    setScale(stats.scale);
    setPositionX(stats.positionX);
    setPositionY(stats.positionY);
  }

  return (
    <>
      <div className="inline-block">
        <TransformWrapper
          positionX={positionX}
          positionY={positionY}
          scale={scale}
          onZoomChange={update}
          onPanning={update}
          onPanningStop={update}
          doubleClick={{ disabled: true }}
          reset={{ disabled: true }}
          pan={{ paddingSize: 0, velocityBaseTime: 0 }}
          scalePadding={{ disabled: true }}
        >
          <TransformComponent>
            <img
              src="https://platinumlist.net/guide/wp-content/uploads/2023/03/IMG-worlds-of-adventure.webp"
              alt=""
              width={500}
              id="img"
            />
          </TransformComponent>
        </TransformWrapper>
      </div>
      <div className="inline-block">
        <TransformWrapper
          positionX={positionX}
          positionY={positionY}
          scale={scale}
          onZoomChange={update}
          onPanning={update}
          onPanningStop={update}
          doubleClick={{ disabled: true }}
          reset={{ disabled: true }}
          pan={{ paddingSize: 0, velocityBaseTime: 0 }}
          scalePadding={{ disabled: true }}
        >
          <TransformComponent>
            <img
              src="https://platinumlist.net/guide/wp-content/uploads/2023/03/IMG-worlds-of-adventure.webp"
              alt=""
              width={500}
              id="img"
            />
          </TransformComponent>
        </TransformWrapper>
      </div>
    </>
  );
}

Expected behavior
Once one image is zoomed the other one's should be zoomed as well.

[themagicalmammal]

Sorry I got it.

import React, { useEffect, useState } from "react";
import {
  TransformWrapper,
  TransformComponent,
  useTransformEffect,
  useTransformContext,
} from "react-zoom-pan-pinch";

const MyComponent = ({
  positionX,
  setPositionX,
  positionY,
  setPositionY,
  scale,
  setScale,
}: any) => {
  const context = useTransformContext();

  useEffect(() => {
    context.transformState.positionX = positionX;
    context.transformState.positionY = positionY;
    context.transformState.scale = scale;
    context.applyTransformation();
  }, [positionX, positionY, scale]);

  useTransformEffect(({ state }) => {
    setPositionX(state.positionX);
    setPositionY(state.positionY);
    setScale(state.scale);
  });

  return (
    <img
      src="https://platinumlist.net/guide/wp-content/uploads/2023/03/IMG-worlds-of-adventure.webp"
      alt="same"
      width={500}
      height={0}
    />
  );
};

export default function SideBySideSyncView() {
  const [positionX, setPositionX] = useState(0);
  const [positionY, setPositionY] = useState(0);
  const [scale, setScale] = useState(1);

  return (
    <>
      <TransformWrapper>
        <TransformComponent>
          <MyComponent
            positionX={positionX}
            setPositionX={setPositionX}
            positionY={positionY}
            setPositionY={setPositionY}
            scale={scale}
            setScale={setScale}
          />
        </TransformComponent>
      </TransformWrapper>
      <TransformWrapper>
        <TransformComponent>
          <MyComponent
            positionX={positionX}
            setPositionX={setPositionX}
            positionY={positionY}
            setPositionY={setPositionY}
            scale={scale}
            setScale={setScale}
          />
        </TransformComponent>
      </TransformWrapper>
    </>
  );
}