I want my lottie animation to start animating when hovered on Desktop and autoplay on mobile view. is there a way to make that happen?

I want the animation to rewind back when cursor is off Something like this

This is the code I used to animate.

Thank you

export default function Landing() {
    useHorizontal();

    const box1 = {
        loop: true,
        autoplay: true,
        animationData: svg1,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };
    const box2 = {
        loop: true,
        autoplay: true,
        animationData: svg2,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };
    const box3 = {
        loop: true,
        autoplay: true,
        animationData: svg3,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };

    return (
        <div className="app" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <Lottie options={box1} height={900} width={900} />
            <Lottie options={box2} height={900} width={900} />
            <Lottie options={box3} height={900} width={900} />
        </div>
    );
}