Problems using Croppie JS

Question

I am trying to use Croppie JS. Upon initializing and binding croppie, the slider is visible, but the image is not. I can't figure out why.

Here is my code.

<input type="file" id="input" name="image" accept="image/*" />
<br />
<img id="output" width="300" /> 
<script>

    input.addEventListener('change', function (e) {
    
        let files = e.target.files;

        console.log(files);

        var image = document.getElementById('output');

        let imgUrl = URL.createObjectURL(files[0]);

        image.src = imgUrl;

        var c = new Croppie(document.getElementById('output'));

        c.bind({
            url: imgUrl
        });

    });

</script>