title: Context returns undefined
body: <p>My context returns undefined so I cannot get the name value from provider.</p>
  <p>I made a snack at <a href="https://snack.expo.io/@johanmelin/functional-context" rel="nofollow noreferrer">https://snack.expo.io/@johanmelin/functional-context</a></p>
  <p>The code looks like</p>
  <pre><code>import React from 'react';
  import { Text } from 'react-native';
  
  const DataContext = React.createContext();
  
  const DataProvider = props =&gt; {
    const [name, setName] = React.useState(&quot;John&quot;);
  
    return (
      &lt;DataContext.Provider value={name}&gt;
        {props.children}
      &lt;/DataContext.Provider&gt;
    )
  }
  
  function App (props) {
    const data = React.useContext(DataContext);
  
    return (
      &lt;DataProvider&gt;
          &lt;Text&gt;hi {data.name}&lt;/Text&gt;
      &lt;/DataProvider&gt;
    )
  }
  
  export default App;
  </code></pre>
  <p>Can anyone see what I'm missing?</p>