Animation backroundColor and borderColor from random color to transparent

[sokolovdm]

I need help
Can someone explain or show how to properly animate color styles that depend on custom props and plus when one of the colors is transparent
Here is an example of my simplified component
I cut down the types of view props to 3, but I have about 10 of them
And the whole snag with animation between color and transparency
The component works so that when the props view changes, it smoothly changes the background and border color

import React from 'react'
import { StyleSheet } from 'react-native'
import Animated, { useAnimatedStyle } from 'react-native-reanimated'

export type TestProps = {
    view: 'base' | 'brand' | 'transparent'
}

export const Test = React.memo<TestProps>(({ view }) => {
    const styles = createStyles()
    const animatedStyles = useAnimation(view)

    return <Animated.View style={[styles.root, animatedStyles]} />
})

const mapBackgroundColor: Record<TestProps['view'], string> = {
    base: 'rgba(255,0,0,1)',
    brand: 'rgba(123,255,244,1)',
    transparent: 'transparent',
}

const mapBorderColor: Record<TestProps['view'], string> = {
    base: 'rgba(123,123,15,1)',
    brand: 'rgba(222,148,12,1)',
    transparent: 'transparent',
}

const useAnimation = (view: TestProps['view']) => {
    const newBackgroundColor = mapBackgroundColor[view]
    const newBorderColor = mapBorderColor[view]
    const prevView = useRef(view)

    useEffect(()=> {
        prevView.current = view
    }, [view])

    return useAnimatedStyle(() => {
        return {}
    })
}

const createStyles = () =>
    StyleSheet.create({
        root: {
            width: 50,
            height: 50,
        },
    })