Reaching object that is declared inside a component from another component - React Native

I'm building a small grammar app. I simplified it here, at snacks

What the above app does so far

The app fetches and prints sample sentences according to our choices of article and noun genders.

Aim

My aim is, whenever a type of word is chosen (article or noun), to light up the color of the type of word chosen. (For example, if definite article chosen, make 'The' yellow for a few seconds in the sample sentence). And then return the article/noun to black as the rest of the sentence is.

My Try

I've declared the animatedTextColor variable in a separate file

//TextColorAnimation.js
...
let animatedTextColor = textColor.interpolate({
        inputRange: [0, 1],
        outputRange: ["rgb(170, 188, 16)", "rgb(0,0,0)"]
    })
    //sending to redux store
    dispatch(setTextColorAC(animatedTextColor))
...

to be used in SampleSentencesEnglish object's style.

//SampleSentences.js
const styles = StyleSheet.create({
  article: {
    color: animatedTextColor
  }
})
const SampleSentencesEnglish = {
 'masculine': {
   'indefinite': <Text>
                  <Text style={styles.article}>A </Text>
                  <Text>man </Text>
                  was looking for you
                 </Text>,
...

I've wrapped styles and SampleSentencesEnglish inside a component to be able to use useSelector

//SampleSentences.js
...
const SampleSentences = (props) => {

            const animatedTextColor= useSelector(textColorSelector);

            const styles = StyleSheet.create({
                    article: {
                        color: animatedTextColor
                  }
            })
                    
            const SampleSentencesEnglish = {
              'masculine': {
                'indefinite': <Text>
                                <Text style={styles.article}>A </Text>
                                <Text>man </Text>
                                was looking for you
                              </Text>,
...
}

export {SampleSentences}

Now, problem is, I cannot reach the SampleSentencesEnglish object that is inside a component from another component in MainApp.js

  //MainApp.js
  ...
  import {SampleSentences} from './Examples/SampleSentences';
  ...
   <View>
      ...
       <Text>Sample Sentence</Text>

       //Invoking object fails
       <Text>{SampleSentences.SampleSentencesEnglish[currentNounType][currentArticleType]}         
      </Text>
  </View>     

Here is a not working version. It has TextColorAnimation.js and TextColorRedux.js files as extra content and has module in SampleSentences.js comparing to first link.

Thanks for reading. Hope it is understandable.

Why not making SampleSentencesEnglish its own component and pass the data you need to it from MainApp component in the props.

Something like:

// in MainApp component
... useSelector
... useState
...
render() {
    return (
        ...
        <SampleSentencesEnglish
          currentNounType={currentNounType}
          currentArticleType={currentArticleType}
          styles: {styles}
        />
        ...
    );
}

And in SampleSentencesEnglish maybe something like:

const SampleSentencesEnglish = props => {

  const englishSamples = {
    'masculine': {
      'indefinite': <Text>
                     <Text style={props.styles.article}>A</Text>
                     <Text>...</Text>
                    </Text>,
      'definite': <Text>...</Text>,
    },
    ...
  }

  return (
    ...
    {englishSamples[props.currentNounType][props.currentArticleType]}
    ...
  )

}

export default SampleSentencesEnglish;