Issue with looping animation in anime.js

I am trying to run animation of floating effect inside an animation that is called with another animation and it completely ignores the loop: true

import anime from "/static/js/lib/animejs/lib/anime.es.js";


export const initAnimation = () => {
    const XOplatform = anime.timeline({
        targets: '.XOplatform',
        autoplay: false,
        begin: function () {
            smallXandO.play();
        }
    }).add({
        duration: 400,
        easing: 'easeInOutExpo',
        scaleX: [1, 1],
        scaleY: [0, 1],
        perspective: '500px',
    }).add({
        duration: 800,
        rotateY: '-15deg',
        rotateX: '8deg',
        rotateZ: '-1deg'
    });

    const smallXandO = anime.timeline({
        targets: '.cross-box-1, .circle-box-1',
        autoplay: false,
    }).add({
        duration: 400,
        easing: 'easeInOutExpo',
        scaleX: [0.05, 0.05],
        scaleY: [0, 1],
        perspective: '500px',
    }).add({
        duration: 400,
        easing: 'easeInOutExpo',
        scaleX: 1
    }).add({
        duration: 800,
        rotateZ: '20deg'
    }).add({
        keyframes: [
            { translateY: -10 },
            { translateY: 0 },
        ],
        duration: 6000,
        easing: 'easeInOutSine',
        direction: 'alternate',
        loop: true
    });

    const initFce = () => {
        setTimeout(function () {
            XOplatform.play();
        }, 600);
    };

    initFce();
};

I tried to restart it once it is complete but it didn’t work

.add({
        keyframes: [
            { translateY: -10 },
            { translateY: 0 },
        ],
        duration: 6000,
        easing: 'easeInOutSine',
        direction: 'alternate',
        loop: true,
        complete: function () {
             smallXandO.restart();
        }
    });