Как сделать что бы style обновлялся

Как сделать что бы style обновлялся при его изменения на сайте. Не только у основного тега , но и у его клонов ?

let saveWrapperW = localStorage.getItem("WrapperW");
    const [ WrapperW, setWrapperW] = useState(saveWrapperW || 150)
    const setLocalStorageWrapperW = (value) => localStorage.setItem("WrapperW", value)
    const onChangeWrapperW = (e) => {
        setWrapperW(e.target.value);
        setLocalStorageWrapperW(e.target.value);
    };
    const inputWrapperW = useRef(); const editItemWrapperW = () => inputWrapperW.current.select();


    let saveWrapperH = localStorage.getItem("WrapperH");
    const [ WrapperH, setWrapperH] = useState(saveWrapperH || 150)
    const setLocalStorageWrapperH = (value) => localStorage.setItem("WrapperH", value)
    const onChangeWrapperH = (e) => {
        setWrapperH(e.target.value);
        setLocalStorageWrapperH(e.target.value);
    };
    const inputWrapperH = useRef(); const editItemWrapperH = () => inputWrapperH.current.select();



    let saveWrapperMargin = localStorage.getItem("WrapperMargin");
    const [ WrapperMargin, setWrapperMargin] = useState(saveWrapperMargin || 50)
    const setLocalStorageWrapperMargin = (value) => localStorage.setItem("WrapperMargin", value)
    const onChangeWrapperMargin = (e) => {
        setWrapperMargin(e.target.value);
        setLocalStorageWrapperMargin(e.target.value);
    };
    const inputWrapperMargin = useRef(); const editItemWrapperMargin = () => inputWrapperMargin.current.select();

    const style__item_wrapper = {
        position:'relative',
        width: `${WrapperW}px`,
        height: `${WrapperH}px`,
        margin:`${WrapperMargin}px`
    }

    const [gridY, setGridY] = React.useState('1fr')

    function addVertically() {
        var clone = document.getElementById('thediv').cloneNode(true);
        let container = document.getElementById("container").appendChild(clone);
        if (container) return;
    }

    function removeVertically() {
        var classesArray = document.getElementsByClassName("thediv__");
        if(classesArray.length == 1) {
            el.parentNode.removeChild(false);
        }
        var elem = document.querySelectorAll('.thediv__');
        var el = elem[elem.length - 1]
        el.parentNode.removeChild(el);

    }

    function addHorizontals() {
        setGridY(gridY + ' 1fr')
    }

    function removeHorizontals() {
        setGridY(gridY.slice(0, -4))
    }

    <div id="priem">
        <div className="container__wrapper" id="container" style={style_wrapper}>
            <img className="item_wrapper thediv__" id="thediv" style={style__item_wrapper}  src="" alt=""/>
        </div>
    </div>