Updating normals on animated morphing Mesh

I’ve been trying to understand this issue for some days now.

I’m exporting a gltf of an animated plane from Cinema4D, when I import the file into glTF viewer from donmccurdy it looks great and exactly how I want it to look. I also imported it into BabylonJs Sandbox and it worked perfectly.

When I load it in my project, the animation plays without a problem but the Normals are set in one state of the mesh and they don’t change. To illustrate what I mean:

This is the initial state of the mesh, which is a flat surface. As you can see from the
VertexNormalsHelper and from the normal material that there’s something wrong.
I have to mention that the normals correspond to the frame the mesh was exported at from C4D

my code is this:

const loader = new GLTFLoader();

        (gltf) => {
          model = gltf.scene

          const animationClip = gltf.animations[0]

          mixer.value = new THREE.AnimationMixer(model)

          action.value = mixer.value.clipAction(animationClip)
          action.value.time = 0
          model.traverse((o) => {
            if(o.isMesh) {
              mesh.value = o
              o.morphTargetInfluences[4] = 1
              const helper = new VertexNormalsHelper( o, 1, 0xff0000 );
              o.material = material
              o.material.morphTargets = true;
        (xhr) => {
          console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`)
        (error) => {
          console.error('Error loading glTF model:', error)

The animation function is this

  const clock = new THREE.Clock()
    let prevTime = performance.now();        
const tick = () => {
      const currentTime = performance.now();
      const delta = (currentTime - prevTime) / 1000; // Convert to seconds
  prevTime = currentTime;
      if (mixer.value) {
      renderer.render(scene, camera)

I feel that the issue can be solved with one line but I’m not so well-versed in ThreeJs. I tried many different things suggested online but nothing worked in my case.
I should also mention that the .value in my code is related to vueJs. In case you’re wondering.

any help explaining what’s happening would be much appreciated, thanks!

After a lot of testing I manged to get something working but I would love to get an explanation of the reasons why this was happening:

I simply turned flatShading on and it worked, I would like flatShading to be turned off but that, it seems, won’t recalculate the normals.
what is the reason for this behaviour? and is there another way where I can turn flatShading off and for it to work?