lottie files stored in public are failing to work, error Cannot read properties of undefined (reading 'length')

[bloodykheeng]

I have stored my lottie files in public folder and when i try to use there url in src i get an error

lottie.js:491 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at completeLayers (lottie.js:491:32)

const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
const NoDataLottie = "/lottie-files/nodata.json";
const SnailErrorLottie = "/lottie-files/snail-error-lottie.json";

function FaqsListing() {
    ...........rest of the code

 <div className="max-w-md">
         <Lottie animationData={SnailErrorLottie} loop autoplay />
  </div>

here are my versions

 "lottie-react": "^2.4.1",
"next": "16.0.7",
 "react": "19.2.1",
  "react-dom": "19.2.1",

[bloodykheeng]

though when i did this it worked

import dynamic from "next/dynamic";
import NoDataLottie from "@/public/lottie-files/nodata.json"
import SnailErrorLottie from "@/public/lottie-files/snail-error-lottie.json"

const Lottie = dynamic(() => import("lottie-react"), { ssr: false });

so why cant i import them directly by passing in the public url like how i do with dot lottie see my dot lotties

import { DotLottieReact } from "@lottiefiles/dotlottie-react";

 <div className="absolute inset-0 flex items-center justify-center opacity-30 md:opacity-50 lg:opacity-100">
              <DotLottieReact
                src="/dot-lottie-files/data-management.lottie"
                loop
                autoplay
                className="w-full h-full max-w-[600px]"
              />
 </div>