[bug]: Translating values starting from 0 requires unit symbol

[SamStAubynTS]

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.3

What's Wrong?

I have a really simple toggled animation of a menu that initially is set to transform: translateY(-100%), when the state is change it slides into view at transform: translateY(0), when the state is then changed again the animation is skipped and the menu just disappears. I found this was due to not having a % unit symbol on the end, others have also found this same issue

To Reproduce

import React from "react";
import { useSpring, animated } from '@react-spring/web';

export default function Menu({ isMenuActive, data }) {
    const springs = useSpring({
        transform: isMenuActive ? `translateY(0%)` : `translateY(-100%)`,
    });

    return (
        <>
            <animated.div style={springs} className="menu-container">
               <p>Menu Items</p>
               <p>Menu Items</p>
               <p>Menu Items</p>
            </animated.div>
        </>
    );
}

Use this basic react hook to animate in the menu component.

Expected Behaviour

When the animation value start at 0 it should infer either the pixel or percentage value so it translates smoothly as it does in normal CSS.

Link to repo

https://codesandbox.io/s/kind-black-sgr767?file=/src/App.js