How to have multiple animations at different times for the same element?

I'm trying to animate my View component in two different ways, one when it first loads, and second when it is clicked on. The problem is, the first animation style is preventing the second to be executed.

    const [addressAnimation] = useState(new Animated.Value(0))
    const [buttonAnimation] = useState(new Animated.Value(0))
    useEffect(() => {
        Animated.stagger(200, [
            Animated.timing(addressAnimation, {
                toValue: 1,
                duration: 500,
            }),
            Animated.timing(buttonAnimation, {
                toValue: 1,
                duration: 500,
            }),
        ]).start()
    }, [])

    const createAnimationStyle = animation => {
        const translateY = animation.interpolate({
            inputRange: [0, 1],
            outputRange: [10, 0],
        })
        return {
            opacity: animation,
            transform: [
                {
                    translateY,
                }
            ]
        }
    }
    const addressStyle = createAnimationStyle(addressAnimation)

The first animation simply brings the View onto the screen by animating opacity and transform.

The View looks as follows:

<Animated.View
    style={[styles.fieldset, addressStyle]}
>
  // some component
</Animated.View>

When a user clicks on the View, I want it to animate to another transform:

    const [googlePlacesAnimation] = useState(new Animated.Value(0))
    const onFocusAnimation = () => {
        Animated.timing(googlePlacesAnimation, {
            toValue: 1,
            duration: 300,
        }).start(() => {
            setFocus(true)
        })
    }
    const translateInterpolate = googlePlacesAnimation.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 300],
        extrapolate: "clamp",
    })

    const addressFocusStyle = {
        transform: [
            {
                translateY: translateInterpolate
            }
        ],
    }

This animation transfroms the View in the opposite direction and by a larger degree. I added the new animation style to the View:

<Animated.View
    style={[styles.fieldset, addressStyle, addressFocusStyle]}
>
  // some component
</Animated.View>

Because the first animation style already sets the translateY to be at a certain point, the second animation doesn't effect the style of the View.