I have taken over a project, and looking at my current task, I can see that the html elements are generated from the backend and is rendered in react using dangerouslySetInnerHTML,

So basically, the backend generates a table of entries. my task is to add a button to it, so I added it in the backend.

My question is, how do I add an event listener to the buttons for each entries? What I've tried so far is giving all the buttons the same Id and adding value attribute with the entry's id as its value, and make an event listener inside useEffect, like this:

const handleClick = useCallback(event => {
    console.log(event);
})
useEffect(() => {
    let doc = document.getElementById('buttonId');
    doc.addEventListener('click', handleClick);
    
    return () => {
        doc.removeEventListener('click', handleClick);
    }

}, [handleClick]);

but the solution above doesn't seem to do anything, no errors or anything.