title: Props value is Undefined while passing through Context API in REACT
body: <p>My Provider File of Context API (Exp file)</p>
  <pre><code>import react form 'react';
  import {createContext} from &quot;react&quot;;
  
  export const ContextforFile = createContext();
  
  export function ContextData(props){
     let rdata=props.data
  return(
     &lt;&gt;
    &lt;p&gt;{rdata}&lt;/p&gt;  //I am able to Get the Data here NO ISSUES TILL HERE
    &lt;ContextforFile.Provider value={rdata} &gt;{props.children}&lt;/ContextforFile.Provider&gt;
    &lt;/&gt;
  );
  }
  
  function A() {
    return (
      &lt;div&gt;
        &lt;ContextData data=&quot;Sara&quot; /&gt;
      &lt;/div&gt;
    );
  }
  
  export default A;
      
  </code></pre>
  <p>My App.js File</p>
  <pre><code>import Exp, { ContextData } from './afterlogin/patirel/patmain';
  import Experiment from './experi';
  import {Routes,Route} from 'react-router-dom';
  import * as React from 'react';
  
  function App() {
   
  
    return (
  
     &lt;ContextData&gt;
  
      &lt;div&gt;
      &lt;Routes&gt;
        &lt;Route index element={&lt;Exp/&gt;} /&gt;
        &lt;Route path=&quot;/experi&quot; element={&lt;Experiment/&gt;} /&gt;
        &lt;/Routes&gt;
  
      &lt;/div&gt;
      &lt;/ContextData&gt;
  
    );
  }
  
  export default App;
  </code></pre>
  <p>only props.data value is not coming here while other values can be easily obtained
  This is Experi file Where I want to get my values my Consumer File</p>
  <pre><code>
  
  import * as React from 'react';
  import { useContext } from 'react';
  import { ContextforFile } from './afterlogin/patirel/patmain';
  
  export default  function Experi(){
  
  const first= useContext(ContextforFile);
  return(
      &lt;div&gt;
     &lt;h1&gt;ISSUE is Here Other VALUES are COMING BUT NOT props.data: {first}&lt;/h1&gt;
      &lt;/div&gt;
  );
  
    }
  
  </code></pre>
  <p>Please help! It's been days and i cannot figure out what am i missing? How can I resolve it?</p>