How to sync the orbit control for multiple canvases simententiously? (Using React fiber & Drei)

Question

I have 4 differet canvases with Cube geometry. I have written common scene for this and using them in diff canvas. I want to share the orbitcontrol for all simententiously. As of now orbitcontrols are working individually for each canvas.

Here is my Scene.jsx -

import React, { useEffect, useRef } from 'react';
import { useThree, useFrame, extend } from '@react-three/fiber';

// import { OrbitControls } from '@react-three/drei';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
extend({ OrbitControls });

const WoodenBox = (props) => {
  // const textureUrl = 'https://fastly.picsum.photos/id/307/5000/3333.jpg?hmac=wQFGsFoqFNhjL7Vf3y12D-qiKGUAl-BuhTbFJthHH4I';
  const imgPath = require('./resources/images/wooden_texture.jpg');

  return (
    <mesh {...props}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial map={new THREE.TextureLoader().load(imgPath)} />
    </mesh>
  );
}

export const Scene = ({ selectedCube }) => {

  const OrbitControlsWrapper = () => {
    const { camera, gl } = useThree();
    const controlsRef = useRef();

    useFrame(() => controlsRef.current.update());
    return <orbitControls ref={controlsRef} args={[camera, gl.domElement]} />;
  };

  return (
    <>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      {/* <axesHelper /> */}
      <WoodenBox position={selectedCube?.position} scale={selectedCube?.scale} rotation={selectedCube?.rotation} />
      {/* <OrbitControls /> */}
      <OrbitControlsWrapper />
    </>
  );
}

and in Parent component, I'm consuming like this -

<Canvas>
   <Scene selectedCube={selectedCube} />
</Canvas>

//same way 4 times

I tried this wraaper -

const OrbitControlsWrapper = () => {
    const { camera, gl } = useThree();
    const controlsRef = useRef();

    useFrame(() => controlsRef.current.update());
    return <orbitControls ref={controlsRef} args={[camera, gl.domElement]} />;
  };

but orbit controls individual canvas. I'm expecting to sync all canvas.