My lottie animation dissapears after completion (js)

I want to animate my logo, and for that I made a lottie file.
(pontos lottie animation by Nicolas van der Straten Ponthoz - LottieFiles)
When I add this to my website, I want it to animate on mouse-over, and to animate back when the mouse leaves. this works just fine.

My problem is that after the animation is completed, it disappears, just blank. When the mouse leaves, the animation comes back and reverse plays as expected. I just don’t get how I can prevent my animation to disappear.

My code:

<script src="" type="module"></script> 

    <div class="hoverEffects">
            style="width: 200px;"

        const playerContainers = document.querySelectorAll(".hoverEffects");
        playerContainers.forEach(container => {
            const player = container.querySelector("dotlottie-player")

            container.addEventListener("mouseover", () => {

            container.addEventListener("mouseleave", () => {


Can you share your lottie file link again? It is not displaying. Can you also share where did you copy the script from?

Did you make your Lottie in After Effects? If so then there might be a blank frame at the end of the composition that is showing a blank spot in the Lottie render. If you preview your Lottie render on your dashboard does the animation blank out quickly at the end of the preview?