I trying to get the specified ID of the div when on click by using querySelector to query the ID that I want, it showing error below:

SyntaxError: Failed to execute 'querySelector' on 'Document': '#3dCubeSlider' is not a valid selector.

Here is the simplified codes

const Gallery = () => {

// some code that handling data from database

function handleShowGifDemo(e) {
  var parent = e.currentTarget.parentNode.id; // the id will be "3Dslider"
  var staticImg = document.querySelector("#" + parent); // This return the Error message
}
return (
<div className="content-bottom">
 <div className="grid-layout row"> 

  {gallery.map((value, key) => {
     return (
       <div id={value.tempid} className={value.tempid +" " +filtercategory +" col-xs-12 col-sm-6 col-md-3 text-center mb-5 align-items-stretch flex-column align-items-stretch gallery-box"} name="data_container" key={key}>
          <div className="demo-gif"></div>
          <div className="show-gif" onClick={handleShowGifDemo}>
              <i className="far fa-play-circle"></i>
          </div>
   </div>
</div>
)}

}

Wondering how to get the dynamic ID name when onClick?