Render children of ViroARImageMarker onAnchorFound

Question

I'm currently working with the ViroReact Community Package in React Native to display a video in AR when a specific image is found. However the onTargetFound function of the ViroARImageMarker is not triggered, and the children of the ViroARImageMarker are not displayed.

When I added the onAnchorFound function to the ARScene (parent) the onAnchorFound method was triggered, however the children of the ViroARImageMarker still weren't rendered. Why is the function not triggered and therefore the children not displayed? How do I fix this?

The image is a 12x12cm black card with a bright orange logo (about 3cm) in the center. Neither of the targets are found in the ViroARImageMarker.

Here's my code: Image Recognition Class

import React, { useEffect, useState } from 'react';

const {
  ViroARScene,
  ViroARImageMarker,
  ViroARTrackingTargets,
  ViroAnimations,
  ViroVideo,
  ViroMaterials,
  ViroBox
} = require('@viro-community/react-viro');

const NewViroTracker = () => {
  const videoPath = require('@assets/videos/wham.mp4');
  const [videoAnimationName] = useState('showVideo');
  const [playAnim, setPlayAnim] = useState(false);

  function _onAnchorFound(evt: any) {
    console.log('Anchor found in Marker :', evt);
    setPlayAnim(true);
  }

  return (
    <ViroARScene>
      <ViroARImageMarker
        target={'inviteCard'}
        onAnchorFound={_onAnchorFound}>
        <ViroVideo source={videoPath} />
      </ViroARImageMarker>

      <ViroARImageMarker
        target={'logo'}>
      <ViroBox position={[0, 0.25, 0]} scale={[0.5, 0.5, 0.5]} />
      </ViroARImageMarker>
    </ViroARScene>
  );
};

ViroARTrackingTargets.createTargets({
  inviteCard: {
    source: require('@assets/images/invite-card.png'),
    orientation: 'Up',
    physicalWidth: 0.12 // real world width in meters
  },
  logo: {
    source: require('@assets/images/logo-empty.png'),
    orientation: 'Up',
    physicalWidth: 0.0287 // real world width in meters
  }
});

ViroMaterials.createMaterials({
  chromaKeyFilteredVideo: {
    chromaKeyFilteringColor: '#00FF00'
  }
});

ViroAnimations.registerAnimations({
  showVideo: {
    properties: { scaleX: 1, scaleY: 1, scaleZ: 1 },
    duration: 1000
  },
  closeVideo: {
    properties: { scaleX: 0, scaleY: 0, scaleZ: 0 },
    duration: 1
  }
});

export default NewViroTracker;

App

import React from 'react';
const { ViroARSceneNavigator } = require('@viro-community/react-viro');
import styled from 'styled-components/native';
import NewViroTracker from 'components/NewViroTracker';

const App = () => {
  return (
    <ViroWrapper
      autofocus={true}
      initialScene={{
        scene: NewViroTracker
      }}
    />
  );
};

export default App;

const ViroWrapper = styled(ViroARSceneNavigator)`
  flex: 1;
`;

Dependencies:

"@viro-community/react-viro": "^2.21.1",
"react": "17.0.2",
"react-native": "0.66.3",