i am building a react native app with viro react , i want to tracking image and show another image over the target image,the problem is sometimes the ar image still on the screen even the target image is not in the camera view but when move the camera position the ar image then go away.

my package.json is below

    {
  "name": "ToothARcademy",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-native-vector-icons/fontawesome": "^4.7.0-alpha.24",
    "@react-native-vector-icons/fontawesome6": "^6.6.0-alpha.27",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "@react-navigation/stack": "^6.4.1",
    "@reactvision/react-viro": "^2.41.4",
    "expo-font": "^12.0.9",
    "react": "18.2.0",
    "react-native": "0.73.3",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.18.1",
    "react-native-progress": "^5.0.1",
    "react-native-reanimated": "^3.15.0",
    "react-native-safe-area-context": "^4.10.8",
    "react-native-screens": "^3.34.0",
    "react-native-vector-icons": "^10.1.0",
    "react-native-zip-archive": "^7.0.1",
    "rn-fetch-blob": "^0.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.20",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.4",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.3.3",
    "@types/react-native": "^0.72.8",
    "@types/react-native-vector-icons": "^6.4.18",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.5.4"
  },
  "engines": {
    "node": ">=18"
  }
}

my ARExplorer.tsx

import React, { useEffect, useState } from "react";
import { ViroARScene, ViroARTrackingTargets, ViroARImageMarker, ViroImage, ViroAnimations, ViroTrackingStateConstants } from "@reactvision/react-viro";
import RNFS from 'react-native-fs';
import {DETAIL_PATHS,DIRECTORY_PATHS } from '../Statics/static-data'

// Dynamically initialize AR assets
const initARAssets = async () => {
  try {
    console.log("Creating AR tracking targets dynamically");

    const documentDir = RNFS.DocumentDirectoryPath;
    const learnDir = DETAIL_PATHS;
    const files = await RNFS.readDir(DIRECTORY_PATHS.LEARN_IMAGES);

    const targets: { [key: string]: any } = {};
    
    files.forEach(file => {
      console.log(file.path);
      // Identify target images by checking if the name ends with any image extension
      const targetMatch = file.name.match(/^Learn_Image(\d+)(\.[a-zA-Z]+)$/);
      if (targetMatch) {
        const key = `Learn_Image${targetMatch[1]}`;
        targets[key] = {
          source: { uri:'file://'+ file.path },
          orientation: "Up",
          physicalWidth: 0.165,
        };
      }
    });

    ViroARTrackingTargets.createTargets(targets);

    console.log("AR tracking targets created:", targets);

    // ViroAnimations.registerAnimations({
    //   scaleUp: {
    //     properties: { scaleX: 1, scaleY: 1, scaleZ: 1 },
    //     duration: 500,
    //     easing: "bounce",
    //   },
    //   scaleDown: {
    //     properties: { scaleX: 0, scaleY: 0, scaleZ: 0 },
    //     duration: 200,
    //   },
    //   scaleButton: {
    //     properties: { scaleX: 0.09, scaleY: 0.09, scaleZ: 0.09 },
    //     duration: 500,
    //     easing: "bounce",
    //   },
    //   scaleSphereUp: {
    //     properties: { scaleX: 0.8, scaleY: 0.8, scaleZ: 0.8 },
    //     duration: 50,
    //     easing: "easeineaseout",
    //   },
    //   scaleSphereDown: {
    //     properties: { scaleX: 1, scaleY: 1, scaleZ: 1 },
    //     duration: 50,
    //     easing: "easeineaseout",
    //   },
    // });
  } catch (error) {
    console.error('Error initializing AR assets:', error);
  }
};

const ARExplorer = () => {
  const [activeMarker, setActiveMarker] = useState<string | null>(null); // Store the active marker's key
  const [imageSources, setImageSources] = useState<{ [key: string]: string }>({});

  useEffect(() => {
    initARAssets();
    loadImagesFromDocumentDir();
  }, []);

  const loadImagesFromDocumentDir = async () => {
    try {
      const files = await RNFS.readDir(DIRECTORY_PATHS.LEARN_IMAGES);

      const sources: { [key: string]: string } = {};
      files.forEach(file => {
        const annotedMatch = file.name.match(/^Learn_Image(\d+)_Annotated(\.[a-zA-Z]+)$/);
        if (annotedMatch) {
          const key = `Learn_Image${annotedMatch[1]}`;
          sources[key] = file.path;
        }
      });

      setImageSources(sources);
    } catch (error) {
      console.error('Error loading images from document directory:', error);
    }
  };

  const onTrackingUpdated = (state: any) => {
    if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      setActiveMarker(null); // Reset the active marker if tracking is unavailable
    }
  };

  const handleAnchorFound = (markerId: string) => {
    if (activeMarker !== markerId) {
      console.log("Anchor found for:", markerId);

      // Clear the previous marker
      setActiveMarker(null);

      // Allow time for the state to clear
      setTimeout(() => {
        setActiveMarker(markerId); // Set the new marker as active
      }, 100);
    }
    else{
      setActiveMarker(markerId);
    }
  };

  const handleAnchorRemoved = (markerId: string) => {
    if (activeMarker === markerId) {
      console.log("Anchor removed for:", markerId);
      setActiveMarker(null); // Reset the active marker when it is removed
    }
  };

  const handleAnchorNotViewed = (markerId: string) => {
    if (activeMarker === markerId) {
      console.log("Anchor no longer viewed:", markerId);
      setActiveMarker(null); // Reset the active marker when it is no longer viewed
    }
  };

  return (
    <ViroARScene onTrackingUpdated={onTrackingUpdated}>
      {Object.keys(imageSources).map(key => (
        <ViroARImageMarker
          key={key}
          target={key}
          onAnchorFound={() => handleAnchorFound(key)}
          onAnchorRemoved={() => handleAnchorRemoved(key)}
          onAnchorUpdated={(anchor) => {
            if (anchor.trackingMethod === "tracking") {
              handleAnchorFound(key);
            } else if (anchor.trackingMethod === "lastKnownPose") {
              handleAnchorNotViewed(key);
            }
          }}
        >
          {activeMarker === key && imageSources[key] && (
            <ViroImage
              source={{ uri: 'file://' + imageSources[key] }}
              scale={[0.18, 0.18, -0.7]}
              rotation={[-90, 0, 0]}
            />
          )}
        </ViroARImageMarker>
      ))}
    </ViroARScene>
  );
};

export default ARExplorer;