Uncaught TypeError: Cannot read property 'removeChild' of null in cropper.js

Question

const bannerInput = document.getElementById('id_edit_banner');
const avatarInput = document.getElementById('id_avatar');

function uploadPhoto(uploadElem) {

    let blobUrl = URL.createObjectURL(uploadElem.files[0]);
    $('#drag-image').attr('src', blobUrl);
    $('#drag-image').on('load', (e) => {
        initCropper();
    });
}


$(document).on('change', '#id_avatar', e => {
    uploadPhoto(avatarInput)
});

function initCropper() {
    var image = document.getElementById('drag-image');

    // error occurs here
    if (image.classList.contains("cropper-hidden")) {
        image.src = "";
        image.cropper.destroy();
    }

    var cropper = new Cropper(image, {
        aspectRatio: 1 / 1,
    });

    // On crop button clicked
    document.getElementById('crop-submit').addEventListener('click', function () {
        $('.update-img-container').addClass('d-none');
        cropper.getCroppedCanvas().toBlob(function (blob) {
            var formData = new FormData();
            formData.append('avatar', blob, 'avatar.jpg');
            formData.append('csrfmiddlewaretoken', $('input[name=csrfmiddlewaretoken]').val());
            $('.cropper-container').remove();
            $.ajax({
                url: `/update-avatar/`,
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function () {
                },
                error: function () {
                }
            });
        });
    });
}

I am getting an error - Uncaught TypeError: Cannot read property 'removeChild' of null on running the destroy method.

This happens only on uploading the second time.

How do I fix this?

Thank you

Any help is appreciated