I wrote a website last year using raw html, css, and js, but I've been attempting to rebuild my code with react as a good exercise to learn the tool. I've noticed that my old code to reset my backgroundImage no longer works if I use a local image directory within the url(...) pointer that contains a step into a folder, and only works with actual http:// urls or ones that do not contain a url; ex. url('image.png') or url('./image.png'). When the new code runs, the backgroundImage disappears if a local png is being used. I've been scratching my head for some time so I'd appreciate any help.

Old code:

function randombg(){
    var random= Math.floor(Math.random() * 2) + 1;
    var bigSize = ["url('background-images/1.png')",
                   "url('background-images/2.png')",
                   ...
    document.getElementById("random").style.backgroundImage=bigSize[random];
}

CSS:

#random {
    width: 100%;
    height: 100vh;
    background-image: url('assets/background-images/1.png');
    background-repeat: repeat; 
    position: absolute;
    z-index: -1;
}

New code is the same but uses a react function to run the js (handleClick(e) {...}).