Blender physics animation in Three.js

So I made a working umbrella following this tutorial:
https://www.youtube.com/watch?v=fObSauc228g&t=130s (Part3/3)
my goal is to use this umbrella model in the web using Three.js, so I made some code which enabables me to import glb files and also play the animations of them.

here is the code:

import * as React from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { Suspense, useState, useRef, useEffect } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls, useGLTF } from '@react-three/drei';
import * as THREE from 'three';

const Model = ({ playAnimation }) => {
const gltf = useGLTF(require("../svg/Part3.glb"));
const mixer = useRef();

// Increase the scale to make the model larger
gltf.scene.scale.set(200, 200, 200);

// Set up animation mixer
if (!mixer.current) {
    mixer.current = new THREE.AnimationMixer(gltf.scene);
    gltf.animations.forEach((animation) => {
        const action = mixer.current.clipAction(animation);
        action.play();
    });
    console.log(gltf.animations)
}

// Update the animation mixer on each frame
useFrame((state, delta) => mixer.current.update(delta));

// Play animation when playAnimation is true
useEffect(() => {
    if (playAnimation) {
        mixer.current.timeScale = 1;
    } else {
        mixer.current.timeScale = 0;
    }
}, [playAnimation]);

return <primitive object={gltf.scene} />;
};

const Umbrella = () => {
const [playAnimation, setPlayAnimation] = useState(false);

const handleButtonClick = () => {
    setPlayAnimation(!playAnimation);
};

return (
    <div>
        <Canvas camera={{ position: [0, 0, 1000], fov: 75, near: 1, far: 5000 }} style={{     

backgroundColor: "black", position: "relative", width: "100%", height: "90vh" }}>
            <directionalLight position={[2000, 2000, 2000]} intensity={1} color="white" />
            <pointLight position={[10, 10, 10]} intensity={0.6} />
            <Suspense fallback={null}>
                <Model playAnimation={playAnimation} />
            </Suspense>
            <OrbitControls />
        </Canvas>
        <button onClick={handleButtonClick}>{playAnimation ? 'Pause Animation' : 'Play Animation'}    

</button>
    </div>
);
};

export default Umbrella;

so I think the code should be fine, currently I am playing all the animations at the same time.
Anyways, when I exported my modle normaly and tested the animations in the web, all the in blender connected pieces didnt seem to be connected, since only the main piece moved. I found out that I need to bake the animations, so it works in the web. But one thing still causes problems, the cover of the umbrella uses the clothes physics of blender and is hooked to the support beams, so it follows them. (See pictures) This part doesnt work in Three.js, first I thought baking the physics could help but sadly it didnt.

Image of umbrella

To be clear, i dont mind if the animation is baked, I just need the animation to be playable and correct in the web using three.js.
I would realy like to provide you with my 3d modle, but I dont know how to do that in SO, please jsut reach out to me for the modle.

I look forward to your answers