[bug]: type error: animated group rotation prop does not accept array or euler object

[coffeeispower]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.7.4

What's Wrong?

When I use spring to animate the rotation of a three.js object, typescript throws a type error when the rotation prop is provided as an array while using the position prop works as expected with an array but applying the same logic to rotation results in a type mismatch.

To Reproduce

Here is a simple example

import { animated, useSpring } from '@react-spring/three';
import { Box } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';
import { useState } from 'react';

const RotatingCube = () => {
    const [clicked, setClicked] = useState(false);
    // Define spring for position and rotation
    const { position, rotation } = useSpring({
        position: [0, 0, 0] as const, // Static position
        rotation: clicked ?
                   ([Math.PI / 4, Math.PI / 4, 0] as const)
                 : ([Math.PI / 2, Math.PI / 4, 0] as const)
    });

    return (
        <animated.group
            position={position}
            rotation={rotation} // This triggers the type error
        >
            <Box onClick={() => setClicked((clicked) => !clicked)}>
                <meshStandardMaterial attach="material" color="orange" />
            </Box>
        </animated.group>
    );
};

const Root = () => {
    return (
        <Canvas>
            <ambientLight />
            <pointLight position={[10, 10, 10]} />
            <RotatingCube />
        </Canvas>
    );
};

export default Root;

Expected Behaviour

I expect the code to compile with no issues since it also works at runtime.

Link to repo

See To Reproduce section

[IAlphaOmegaI]

+1