The error is that the image is not changing. The code does not replace the image of the traffic light with the next state. Can anyone help?

```html
<!DOCTYPE html>
<html>
<head>Traffic Lights</head>
<body onload = "setInterval(MainSequence(), 2000)">
    <h1>Javascript Traffic Lights</h1>
    <button onclick = "MainSequence()">Click here to change the lights</button>
    <img id = "myImage" src = "RedLight.png" width = "270" height = "400"></img>
    <script>
    var LightStates = newArray("RedLight.png", "RedandAmberLight.png", "GreenLight.png", "AmberLight.png");
    var image = document.getElementById("myImage");
    function MainSequence(){
        if (image.src === (LightStates[0])){
            //changes the source of the image
            image.src = LightStates[1];
            return;
        }
        if (image.src === (LightStates[1])){
            image.src = LightStates[2];
            return;
        }
        if (image.src === (LightStates[2])){
            image.src === LightStates[3];
            return;
        }
        if (image.src === (LightStates[3])){
            image.src = LightStates[0];
            return;
        }
    };
    </script>
</body>
</html>

```