primitive tag in "React three fiber" not unmount the 3D model even when destroying the parent component

[bannarisoftwares]

Hello team, Good day. We have react app, have 2 screens and want to render the multiple 3d models on AR screens. While user tap on AR model, we want to update on Main screen. Here model rendered based on targets are working fine. The problem is , On first time, user able to select the model and able to update the Main screen. But on second time, while i am try to open the AR screen, the first time selected 3d model is always rendering on tapped position. I am able to track the second target and second target 3d model also rendering, But the first 3d model is not going and unmounting. So how to unmount the previously selected 3d model from AR screen on each time open ?.

SandBox Link: https://codesandbox.io/s/ar-3d-model-unmount-issue-uf7t68

Target 1 image url : https://hiukim.github.io/mind-ar-js-doc/assets/images/bear-3c737546fb0bde7a9c45b45ee999d132.png

Target 2 image url : https://hiukim.github.io/mind-ar-js-doc/assets/images/raccoon-2ef571baece2ee4724d0d19edf3de791.png