Here is the code:
<div className="text-center items-center justify-center py-10 px-4 sm:px-6 lg:px-8">
<ShowedAnimation/>
</div>


"use client";

----


export function ShowedAnimation() {
return (
<LottieAnimation
animationData={animationData}
className="w-64 h-64 sm:w-128 sm:h-128 mx-auto"
/>
);
}



/* eslint-disable @typescript-eslint/no-explicit-any */

import React, {useEffect, useState} from 'react';
import dynamic from 'next/dynamic';

// Dynamically import Lottie with SSR disabled
const Lottie = dynamic(() => import('lottie-react'), { ssr: false });

interface LottieAnimationProps {
animationData: any;
loop?: boolean;
autoplay?: boolean;
className?: string;
duration?: number; // it will hide the animation after the specified duration
}

const LottieAnimation: React.FC<LottieAnimationProps> = ({
animationData,
loop = true,
autoplay = true,
className,
duration,
}) => {

const [isVisible, setIsVisible] = useState(true);

useEffect(() => {
if (duration) {
const timer = setTimeout(() => {
setIsVisible(false);
}, duration);

return () => clearTimeout(timer);
}
}, [duration]);

if (!isVisible) {
return null;
}

return (
<Lottie
animationData={animationData}
loop={loop}
autoplay={autoplay}
className={className}
/>
);
};

export default LottieAnimation;