useGltf in @react-three/drei is not getting animations in next.js 14 but works in webpack

Question

I have this component:

import React from "react";
import { useEffect, useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";

import planeScene from "../src/assets/plane.glb";

export default function Plane({ isRotating, ...props }) {
  const ref = useRef();
  // Load the 3D model and its animations
  const { scene, animations } = useGLTF(planeScene);
  // Get animation actions associated with the plane
  console.log("animaitonis in plane", animations);
  const { actions } = useAnimations(animations, ref);

  // Use an effect to control the plane's animation based on 'isRotating'
  // Note: Animation names can be found on the Sketchfab website where the 3D model is hosted.
  useEffect(() => {
    if (isRotating) {
      actions["Take 001"].play();
    } else {
      actions["Take 001"].stop();
    }
  }, [actions, isRotating]);

  return (
    <mesh {...props} ref={ref}>
      <primitive object={scene} />
    </mesh>
  );
}

this component's log shows the animations in webpack project.

But same component in next.js14 has no animations

the only difference is I have to use dynamic import in next.js 14. Otherwise I get "Error: R3F: Span is not part of the THREE namespace! Did you forget to extend?". but i do not if this would cause the issue. Because as far as I know, dynamically imported component is loaded asynchronously, which means it's not included in the initial bundle. Instead, it's fetched and loaded when it's needed. And ssr: false means that the component will not be server-side rendered. Instead, it will only be rendered on the client-side

import dynamic from "next/dynamic";

const Plane = dynamic(
  () => import("@/components/3D/Plane").then((res) => res.default),
  { ssr: false }
);

Instead of useGltf, I tried to use useLoader in next.js 14

import { useLoader } from "@react-three/fiber";

const pl = useLoader(GLTFLoader, "/plane.glb");