How to put a click event on an entity in Aframe in react

Question

`import 'aframe';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import sky from './stars.jpg';
import mountain from './models/Exterior_baked_with_table.glb';
import newphone from './models/phone.glb';
import mallstore from './models/mallstore.glb';
import Comp from "./Comp.js"
import React, { useState,useRef, Component, useEffect } from 'react';
import PopModal from './PopModal';
import * as NEW from 'aframe-react';
import ReactDOM from 'react-dom';
import * as THREE from 'three';
import './newAframe.js'

const App = () => {
const entityRef=useRef(null);
const [popUpModal, setPopUpModal]=useState(false);  
const loader = new GLTFLoader();

const doSomething = () => {
  setPopUpModal(!popUpModal);
};

loader.load(mountain,(d) =>{
  // alert(3)
  const entity= document.getElementById("mountain");
  entity.object3D.add(d.scene);
})

loader.load(newphone,(d) =>{
  console.log("2");
  const phoneEntity= document.getElementById("samsung-phone");
  phoneEntity.object3D.add(d.scene);
  // const phoneEntity1= document.getElementById("samsung-phone1");
  // phoneEntity1.object3D.add(d.scene);
  // Attach a cursor to the entity
  phoneEntity.setAttribute("cursor", "rayOrigin: mouse; fuseTimeout: 500;");
  // Listen for click events
  phoneEntity.addEventListener("click", () => {
    doSomething();
  });
})
return (  
  <>      
  <React.Fragment>
    {popUpModal &&
    <PopModal
    show={popUpModal}
    onCloseClick={() => setPopUpModal(false)}
    message="Are you sure you want to submit?"
    />
  }
  <a-scene info-message="htmlSrc: #messageText">
    <a-assets>
      <img id="sky" src={sky} alt="sky img"/>
    </a-assets>
    <a-sky
    color='#ffffff'
    material="src: #sky"
    rotation="0 0 0">
    </a-sky>
    <div style={{margin:"10px", zIndex:999999}} className="position-relative">
    <div className="position-absolute top-0 start-0">
    <button className='btn btn-warning btn-sm' ><i className="fa fa-bars"></i>Category</button>
    </div>
    <div className="position-absolute top-0 end-0">
    <button className='btn btn-warning btn-sm'>Add to cart</button>
    </div>
  </div>
    <a-entity  id="mountain" position="0 0 0"></a-entity>
    <a-entity test id="samsung-phone" ref={entityRef} position="-2.75 1 0.5" scale="1 1 1" raycaster="objects: #samsung-phone">    
      <a-cursor cursor="rayOrigin: mouse;" target="samsung-phone"></a-cursor>  
    </a-entity>
  </a-scene>
  </React.Fragment>

  </>
);  
}

export default App;`

newAframe.js

    import { AFrame } from "aframe";
const AFRAME= window.AFRAME;
  AFRAME.registerComponent('test', {  
    init: function () {
      const clickme=document.getElementById("samsung-phone");
      clickme.addEventListener('click', function (evt) {
       console.log("hi mamta");
   });
  }
  });

I am using Aframe with React and i am new to both of the techstack. I am creating a virtual ecommerce poc in aframe where i am showing my store as a glb model and adding products as another glbs. I want to have a click event on the product glb to show the description of the products in a pop up. This is my code so far. How can i put a onclick event on a-entity with id="samsung-phone" ?

EDIT :

I have added an image of the code. I want to open a popup only on the entity with id="samsung-phone". Right now the click is happening on the whole model or you can say if i click anywhere.