I want to show the given index item after rotate animation at top center where the indicator was located .

this is the method to get the result but its still show wrong item. Here is my component written in vue.js application. Help me to fix this problem.

``
roll(index, list, duration = 4000) {
            // Step 1: Find the item in the list by index and log it
            const item = list[index];
            console.log("Index:", index);
            console.log("Item:", item);

            // Step 2: Calculate the degree of the segment that the item occupies
            const segmentDegree = 360 / list.length; // Degree per segment
            const itemSegmentDegree = segmentDegree * index;
            console.log("Segment Degree of Item:", itemSegmentDegree);

            // Step 3: Calculate the top center segment degree
            const topCenterSegmentDegree = 0; // Top center is assumed to be 0 degrees

            // Step 4: Calculate the rotation needed
            // To have the item at the top center, adjust by subtracting itemSegmentDegree from 360
            const totalDegrees = 360 * 6; // Number of full rotations
            const rotationToAlignItemAtTop = (360 - itemSegmentDegree) % 360;
            const newEndDegree = totalDegrees + rotationToAlignItemAtTop;

            console.log(
                "Rotation to Align Item at Top:",
                rotationToAlignItemAtTop
            );
            console.log("New End Degree:", newEndDegree);

            // Get the wheel element
            const wheel = this.$refs.wheel;
            if (!wheel) {
                console.error("Wheel element is not available.");
                return;
            }

            // Reset previousEndDegree for a new spin
            this.previousEndDegree = this.previousEndDegree % 360;

            // Cancel any previous animation
            if (this.animation) {
                this.animation.cancel();
            }

            // Perform the animation
            this.animation = wheel.animate(
                [
                    { transform: `rotate(${this.previousEndDegree}deg)` },
                    { transform: `rotate(${newEndDegree}deg)` }
                ],
                {
                    duration: duration, // Use the provided duration
                    direction: "normal",
                    easing: "cubic-bezier(0.440, -0.205, 0.000, 1.130)", // Use a smooth easing function
                    fill: "forwards",
                    iterations: 1
                }
            );

            // Update the rolling state and handle the reward box
            setTimeout(() => {
                this.rolling = false;
                console.log("done rolling");
                this.rewardBox = true;
            }, duration);

            // Update previousEndDegree to the new end degree
            this.previousEndDegree = newEndDegree;
        },
``

How I suppose to change the method which part is wrong