React example clears aframe objects on arSystem.start()

import 'aframe';
import 'mind-ar/dist/mindar-image-aframe.prod.js';
import mindfile from "../../stage/targets.mind";

const ViewGallery = () => {
  const [galleryEntries, setGalleryEntries] = useState([]);
  const sceneRef = useRef(null);
  const [galleryMind, setGalleryMind] = useState(mindfile);

  useEffect(() => {
    const fetchData = async () => {
     const sceneEl = sceneRef.current;
     const arSystem = sceneEl.systems['mindar-image-system'];
     console.log("Starting AR!");
     arSystem.start(); // start AR
     return () => {
     arSystem.stop();
     }    

     fetchData();
   }, []); 

     return (
     <a-scene
       ref={sceneRef}
       mindar-image={`imageTargetSrc: ${galleryMind}; autoStart: false`}
       color-space="sRGB"
       device-orientation-permission-ui="enabled: false"
     >    
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

       <a-entity
         id="sphere"
         geometry="primitive: sphere; radius: 0.1"
         material="color: #3498db"
         position="0 0 -1"
       ></a-entity>

            <a-entity key="6" mindar-image-target={`targetIndex: 0`}>
               <a-entity position="0 -0.7 0" geometry="primitive: plane; width: 0.5; height: 0.25">
                  <a-entity text={`value: Artwork; align: center;`} position="0 0.05 0" />
                  <a-entity text={`value: by Artist Name; align: center;`} position="0 0 0" />
                  <a-entity text={`value: valued at $100; align: center;`} position="0 -0.05 0" />
                </a-entity>
            </a-entity>~
     </a-scene>
   );     
  };       

  export default ViewGallery;

I have a bit of a weird issue here. I am using react, and mind-ar-js together.

The current code briefly shows the blue sphere, but it soon is hidden along with all other aframe elements as soon as arSystem.start() is called. If I do not call arSystem.start() the blue sphere remains.

After calling arSystem.start() mind-ar-js does appear to be recognizing the image, and wanting to put an anchor, but it seems it is prevented by aframe hiding or not showing. The loading UI, and scanning UI both work, as when the target image is seen in the camera the scanning UI goes away. However the plane entity to show the artists information does not appear.

I also notice that when i subscribe to the renderstart event as in the react example, it does not fire.

Is there a better way to handle this in react?

hiukim / mind-ar-js

React example clears aframe objects on arSystem.start() #471