Intento obtener la ID especificada del div cuando hago clic usando querySelector para consultar la ID que quiero, y muestra el siguiente error:

SyntaxError: no se pudo ejecutar 'querySelector' en 'Document': '#3dCubeSlider' no es un selector válido.

Aquí están los códigos simplificados.

 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> )}

}

¿Se pregunta cómo obtener el nombre de ID dinámico al hacer clic?