Este es un proyecto de reacción. Estoy usando un componente externo (Scroller.jsx) que no puedo modificar.

 <Scroller />

Cuando inspecciono la parte del componente en el navegador, veo lo siguiente.

 <div> <!-- many other tags and divs --> <button type="button" class="container custom-left" data-unique-id="show-left"> <div>...</div> </button> <button type="button" class="container custom-right" data-unique-id="show-right"> <div>...</div> </button> <!-- many other tags and divs --> </div>

¿Hay alguna manera de que pueda apuntar a estos 2 botones usando la propiedad data-unique-id ?
y ser capaz de mantener un contador cada vez que se hace clic en el botón?
Esos botones ya vienen con alguna funcionalidad de clic. No quiero afectar eso de ninguna manera.
Solo busco llevar la cuenta de los clics y no puedo modificar el componente.

Tenga en cuenta que estoy tratando de lograr esto apuntando a los botones de alguna manera y llevando un conteo.
No puedo modificar el botón y agregar onClick en él cambiando las cosas en el componente Scroller.

Intenté lo siguiente, pero la selección de consulta aparece sin definir.
Además, este es un proyecto React.
Tratando de no tener que usar document.querySelector y, en su lugar, buscar algo específico de React.

La selección en sí está actualmente sin definir, lo cual es un problema.

 const = leftButton = document.querySelector('[data-unique-id="show-left"]'); const = rightButton = document.querySelector('[data-unique-id="show-right"]');

Después de poder seleccionar, con la esperanza de contar a través de lo que no se ha probado. No estoy seguro si funcionará.
Y nuevamente, este es un proyecto React. Con la esperanza de escribirlo con algo más específico de React.

 leftButton.addEventListener('click', function() { setCount(count - 1); }); rightButton.addEventListener('click', function() { setCount(count + 1); });

La consulta es esencialmente por qué mi selección no funciona. Y cómo podría contar cuándo se hace clic en estos botones de manera React. Gracias.

MiComponente.jsx

 import Scroller from 'external-lib/Scroller'; const MyComponent = () => { const [count, setCount] = React.useState(0); useEffect(() => { const leftButton = document.querySelector('[data-unique-id="show-left"]'); // undefined const rightButton = document.querySelector('[data-unique-id="show-right"]'); // undefined leftButton.addEventListener('click', function() { setCount(count - 1); }); rightButton.addEventListener('click', function() { setCount(count + 1); }); }, []); return (<Scroller/>); }; export default MyComponent;