How to display a random background image while avoiding repetition of those images?

I have this JS code which includes an array of (currently) 4 images and a function that chooses a random image:

    const scenes = ['url(scenes/scene1.jpg)', 'url(scenes/scene2.jpg)', 'url(scenes/scene3.jpg)', 'url(scenes/scene1.jpg)'];

    function randomScene() {
        const shuffle = Math.floor(Math.random() * (scenes.length));
        document.getElementById('bg-switch').style.backgroundImage = scenes[shuffle];
    };

Then I have an HTML button - if clicked, it executes "randomScene()", and displays an image from the array called "scenes".

    <section id="bg-switch">
        <div class="container text-center">
            <a><button type="button" onclick="randomScene()">Click!</button></a>
        </div>
    </section>

Problem: I would like to avoid showing the same image twice in a row when the button is clicked.

1. I'd like to remove already shown images from the array.
2. I'd like reset (shuffle?) the array, once all elements were removed from it, so clicking the button keeps displaying images.

I don't know how to achieve the things described above - I'm new to JS and web dev in general. Thanks in advance for your help!