Reactjs – Blender + Three.js animation

so I got myself a 3d model of a umbrella which already comes with a animation which opens and closes it. Now i imported it into my project using Three.js and played the animation.

Using the code I found out that its actualy two animations, yet both of them are not what I expected, one just rotates the umbrella and the other just moves the pusher up and down, but doesnt take the top and its supporting sticks with it. (like its displayed in blender). I guess it has something to do with the way those things are connected in blender, sadly I have no experience with blender, so I ask you guys.

so this is my 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;

altough I am pretty sure it has nothing to do with the code.

And this is how it should look like:
Beginning of the animation

middle of animation
(after this it jsut opens again)

I would like to provide you the file but I didnt see an option to do so and I payed a few € for this file, so I am not even sure if it would be legal..

Anyways, maybe somebodys has tipps or usefull imformation.
`