Estoy creando una aplicación en React y estoy creando un elemento de configuración. El elemento es un botón que cambia de tamaño al hacer clic; que ya he logrado:

 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>

Pero lo que quiero hacer es que el ícono de configuración que se muestra en el botón también pueda cambiar al hacer clic. Por favor, ayúdame. Específicamente: la imagen se pasa al botón a través de css background-image , y el css se pasa al botón a través de la función de clic usando .setAttribute ; Estoy bien configurando la imagen a través de la ruta o la variable de importación, solo quiero que funcione. Las funciones settingFunc y legacyFont no se proporcionan en mi código, se proporciona todo lo relacionado con mi aviso.