Как передать значение из цвета из внешнего объекта в props компонентов?

подскажите пожалуйста, как пробросить значение цвета из внешнего объекта в компонент и применить его к объекту непосредственно? В данном случае у меня цвета хранятся в файле Color.jsx, я их подключаю к корневому компоненту и хочу пробросить в ItemCard, а через него и в Btn, но ничего не происходит... Пересмотрел кучу гайдов и не могу понять, как именно пропсы работают. UPD: исправил регистр благодаря комментаторам, теперь выдает ошибку Cannot read property "active" of undefined. Она находится в корневом компоненте и если убрать проброс пропса itemCard, то все хотя бы работает. Но как тогда передать пропс?

import Color from '../constansts/Color.jsx'

export default function App() {
    return (
        <SafeAreaView style={BasicStyles.container}>
          <StatusBar style="auto" />
          <Header/>
          <HomeSlider/>
          <ItemCard color={Color.active}/>
        </SafeAreaView>
    );
}

export default function ItemCard(props) {
    return (
        <View>
          <Btn color={props.Color.active}/>
        </View>
    )
}

export default function Btn(props) {
    return (
        <Pressable style={ButtonStyles.wrapper} color={props.color.active}>
    )
}