I am building an app in React and am making a settings element. The element is a button that changes size on-click; which I have already achieved:

import SettingsA from "./images/settingsA.png";
import SettingsB from "./images/settingsB.png";

var settingActivated = 0;

function settingFunc() {
    settingActivated++;

    if (settingActivated%2===0) {
        document.getElementById("settingBut").setAttribute("style", "width: 6rem; background-image: {SettingsA}");
            document.getElementById("fontBut").setAttribute("style", "width: 0rem; height: 4rem;");
    } else {
        document.getElementById("settingBut").setAttribute("style", "width: 10rem; background");
            document.getElementById("fontBut").setAttribute("style", "width: 7rem; height: 4rem;");
    }
  }

<div id="settings">
     <button id="settingBut" onClick={settingFunc}></button>
          <div id="settingDropdown">
               <button id="fontBut" onClick={legacyFont}>Legacy<br/>Font</button>
</div>

But what I want to do is make it so the setting icon displayed on the button can change on-click as well. Please help me out. Specifically: the image is passed to the button via css background-image, & the css is passed to the button via on-click function using .setAttribute; I am fine with setting the image via path or import variable, I just want it to work. settingFunc and legacyFont functions are not provided in my code, everything involved with my prompt is provided.