title: Context returning undefined
body: <p>I have a context that contains an array, this context has a function that updates a certain value in that array:</p>
  <pre><code>import React, { createContext, useState } from 'react'
  
  export const SliderValueContext = createContext()
  
  export function SliderValueProvider({ children }) {
  
      const [intensity, setIntensity] = useState([
          {
              EXAMPLE0: 0,
          },
          {
              EXAMPLE1: 0,
          },
          {
              EXAMPLE2: 0,
          },
      ])
  
      const updateCertainIntensity = (value, index) =&gt; {
  
          console.log('Index: ' + index)
          console.log('Value: ' + value)
          let newIntensity = [...intensity]
          newIntensity[index] = value
  
          setIntensity(newIntensity)
      }
  
      return (
  
          &lt;SliderValueContext.Provider
          
              value={{intensity, updateCertainIntensity}}&gt;
  
              {children}
  
          &lt;/SliderValueContext.Provider&gt;
      )
  }
  </code></pre>
  <p>I have a basic StackNavigator with both of my screens:</p>
  <pre><code>import React from 'react'
  
  import { createStackNavigator } from '@react-navigation/stack'
  
  import Index from './index'
  
  import SliderScreen from './screen'
  
  const Stack = createStackNavigator()
  
  export default function MyStack() {
  
      return (
  
          &lt;Stack.Navigator&gt;
  
              &lt;Stack.Screen name='Index' component={Index}/&gt;
              &lt;Stack.Screen name='SliderScreen' component={SliderScreen}/&gt;
  
          &lt;/Stack.Navigator&gt;
      )
  }
  </code></pre>
  <p>This is how my index looks like:</p>
  <pre><code>import React from 'react'
  
  import {
  
      Button
  
  } from 'react-native'
  
  import { useNavigation } from '@react-navigation/native'
  
  import { SliderValueProvider } from './context'
  
  export default function Index() {
  
      const navigation = useNavigation()
  
      return (
  
          &lt;SliderValueProvider&gt;
  
              &lt;Button title='YOU' onPress={() =&gt; navigation.navigate('SliderScreen')}&gt;&lt;/Button&gt;
  
          &lt;/SliderValueProvider&gt;
      )
  }
  </code></pre>
  <p>App.js</p>
  <pre><code>export default function App() {
  
    return (
  
              &lt;NavigationContainer&gt;
  
                &lt;MyStack&gt;
  
  
                &lt;/MyStack&gt;
  
              &lt;/NavigationContainer&gt;
  
    )
  }
  </code></pre>
  <p>Custom Slider component:</p>
  <pre><code>export default function SliderGroup({ id, text, borderColor }) {
  
      const { updateCertainIntensity } = useContext(SliderValueContext)
  
      return (
  
          &lt;View style={[styles.slider_container, { borderColor: borderColor }]}&gt;
  
              &lt;View style={styles.slider_container_text}&gt;
  
                  &lt;Text style={styles.text_style}&gt; {text} &lt;/Text&gt;
  
                  {/* &lt;Text style={styles.number_style}&gt;  &lt;/Text&gt; */}
  
              &lt;/View&gt;
  
              &lt;View style={styles.slider_container_slider}&gt;
  
                  &lt;Slider
  
                      onValueChange={(value) =&gt; updateCertainIntensity(value, id)}
                      step={1}
                      minimumValue={0}
                      maximumValue={5}
                      maximumTrackTintColor='rgb(255, 255, 255)'
                  /&gt;
  
              &lt;/View&gt;
  
          &lt;/View&gt;
      )
  }
  </code></pre>
  <p>Problem: Whenever I try to access the useContext in my custom Slider component, it says that the context is undefined <code>undefined is not an object (evaluating useContext.updateCertainIntensity)</code> .Other contexts however, work just fine, but they are not using objects, just simple strings. Does it have to do with using an object in useState()?</p>