ViroSound nos stopping on iOS

[leandro2219]

Requirements:

Please provide the following information about your environment:

1. Development OS: Windows,
2. Device OS & Version: iOS 13.7
3. Version:
   "@viro-community/react-viro": "^2.20.2",
   "react": "17.0.2",
   "react-native": "0.65.1"
4. Device(s): Iphone 7 y Iphone 11

Description
Hi, We are creating an App which people can use it on our magazine, pointing to some areas and hearing some sound, viewing videos and viewing 3dObject.
My problem is when I point to the first ViroARImageMarker I can see the 3dObject and hear the sound, then I point to the second ViroARImageMarker and I can see the video, the 3dObject dissapear but the sound still hearing.

This works ok on Android but on iOS we have this issue.

Next is a example code to reproduce it. We need to have our app on production asap but it only works on Android now.

Thanks.

Reproducible Demo

`import React, {useState} from 'react';
import SplashScreen from 'react-native-splash-screen'
import {ViroARScene, ViroARSceneNavigator, Viro3DObject, ViroAmbientLight, ViroARTrackingTargets, ViroARImageMarker, ViroVideo, ViroNode, ViroSound, ViroImage} from '@viro-community/react-viro';

const MagazineSceneAR = () => {
const [actualModal, setActualModal] = useState(null);
const [initSound, setInitSound] = useState(true);
const [pauseUpdates, setPauseUpdates] = useState(false);

SplashScreen.hide();

ViroARTrackingTargets.createTargets({
sn1 : {
source : {uri : 'https://www.revistalagunas.com/app/assets/1/tapa/tapa-1.jpg'},
orientation : 'Up',
physicalWidth : 0.21
},
vd1 : {
source : {uri : 'https://www.revistalagunas.com/app/assets/1/portada/portada.jpg'},
orientation : 'Up',
physicalWidth : 0.1224
}
})

function onInitialized(state, reason) {}

function _onAnchorFound(objId) {
console.log(objId, actualModal);
if (actualModal !== objId) {
console.log('Changing to ' + objId);
setActualModal(objId);
setPauseUpdates(false);
}
}

function _startLoadingImg(){
setInitSound(true);
}

function _endLoadingImg(){
setInitSound(false);
setPauseUpdates(true);
}

return (


<ViroARImageMarker target={'sn1'} key={"targ-sn1"} onAnchorFound={(e) => _onAnchorFound('sn1')} pauseUpdates={pauseUpdates}>
{actualModal == 'sn1' ?

<ViroSound source={{uri : 'https://www.revistalagunas.com/app/assets/1/tapa/sonido.wav'}} paused={initSound} />

          <Viro3DObject
              source={require('./src/joe/Joe.vrx')}
              resources={[
                      require('./src/joe/50b772da-ec7a-4070-9245-22985d6d1ee9_image.png'),
                      require('./src/joe/6866fa54-c546-43c8-a98d-e61f5e545a5a_image.png')]}
              type="VRX"
              scale={[0.00001, 0.00001, 0.00001]}
              rotation={[90, 0, 0]}
              onLoadStart={() => _startLoadingImg('sn1')}
              onLoadEnd={() => _endLoadingImg('sn1')}
          />              
      </ViroNode>
  : null}
  </ViroARImageMarker >

  <ViroARImageMarker target={'vd1'} key={"targ-vd1"} onAnchorFound={(e) => _onAnchorFound('vd1')} pauseUpdates={pauseUpdates}>
    {actualModal == 'vd1' ? 
        <ViroNode>
            <ViroVideo 
                source={{uri : 'https://www.revistalagunas.com/app/assets/1/portada/portada.mp4'}} 
                loop={true} 
                scale={[0.4,0.4,0.4]}
                rotation={[-50, 0, 0]}
                width={0.406}
                height={0.720}
            />
        </ViroNode>
    : null}
</ViroARImageMarker >
</ViroARScene>

);
};

export default () => {
return (
<ViroARSceneNavigator
autofocus={true}
initialScene={{
scene: MagazineSceneAR,
}}
style={{flex: 1}}
/>
);
};
`