document.getElementById is not changing the styles dynamically in my React component

I have a button that I need the background color and inner text to on click. I tried the document.getElementById method but it is not applying the changes. How to I solve this issue?

<TableBody>
    {
        records === null ?
        []
        :
        records.map((item, index) => (
            <button className="addToggle" id={"addToggle" + index} onClick={() => handleAddSwitch(item, index)}>
                <CircleCheckIcon />
                Add
            </button>
        ))
    }
</TableBody>


function handleAddSwitch(item, index) {
    document.getElementById("addToggle" + index).style.backgroundColor = "red";
    document.getElementById("addToggle" + index).innerHTML= "Added";
}

Answer

You can use event.target OR event.currentTarget:

<button className="addToggle" id={"addToggle" + index} onClick={(e) => handleAddSwitch(e, index)}>
    <CircleCheckIcon />
    Add
</button>

Function

const handleAddSwitch(e, index) => {
    e.target.style.backgroundColor = "red";
    e.target.innerHTML= "Added";
}