Threejs SkinnedMesh desync

HTML

<!doctype html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        background-color: #black;
        color: #000;
      }

      a {
        color: #2983ff;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.168.0/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three"

      import { OrbitControls } from "three/addons/controls/OrbitControls.js"
      import * as SkeletonUtils from "three/addons/utils/SkeletonUtils.js"
      import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"
      import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js"
      import { GUI } from "three/addons/libs/lil-gui.module.min.js"

      const conf = { moving: false }
      const gui = new GUI()
      gui.add(conf, "moving").name("moving")
      gui.open()

      const clock = new THREE.Clock()
      const container = document.getElementById("container")
      const width = container.offsetWidth,
        height = container.offsetHeight
      const renderer = new THREE.WebGLRenderer({
        antialias: false,
        powerPreference: "high-performance",
      })
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.shadowMap.autoUpdate = false;

 
      let mixer = new THREE.AnimationMixer()
      const pixelRatio = Math.min(1.5, window.devicePixelRatio)
      renderer.setPixelRatio(pixelRatio)
      renderer.setSize(width, height)
      document.body.appendChild(renderer.domElement)

  ...