title: why is context undefined
body: <p><strong>PROBLEM</strong></p>
  
  <p>I am trying to make an alert dialog reusable via context API. however i get an error saying that context is undefined. I have defined my context and the dialog component as shown below; </p>
  
  <pre><code>const dialogContext = React.createContext();
  const {Provider, Consumer} = dialogContext;
  
  const C = {
    ask: 'ASK',
  }
  
  export function DialogProvider({children}){
  
    const [dialogState, setDialogState] = React.useState({
      show: false,
      message: '',
      type: C.ask,
      title: '',
      id: '',
    })
  
    return(
      &lt;Provider value={{dialogState, setDialogState}}&gt;
        {children}
      &lt;/Provider&gt;
    )
  }
  
  export  function AlertDialogSlide({myPayload}) {
    const {warn, title, message, callback, id} = myPayload;
    const context =  React.useContext(dialogContext);
    console.log(context, dialogContext);
  
    const {dialogState ,setDialogState} = context;
  
    const open = (id) =&gt; {
      setDialogState({
        ...dialogState,
        show: true,
        message: message.description,
        title: message.title,
        id,
      })
    }
  
    if(warn){
      open(id)
    }
  
    const handleClose = (callBack, args=[]) =&gt; {
      console.log('arguments',args)
      callBack.fn &amp;&amp; callBack.fn(...args);
      setDialogState({
        ...dialogState,
        show: false,
      })
    };
  
    return (
      &lt;div&gt;
        &lt;Dialog
          open={dialogState.show}
          TransitionComponent={Transition}
          keepMounted
          onClose={handleClose}
          aria-labelledby="alert-dialog-slide-title"
          aria-describedby="alert-dialog-slide-description"
        &gt;
          &lt;DialogTitle id="alert-dialog-slide-title"&gt;{title}&lt;/DialogTitle&gt;
          &lt;DialogContent&gt;
            &lt;DialogContentText id="alert-dialog-slide-description"&gt;
              {message}
            &lt;/DialogContentText&gt;
          &lt;/DialogContent&gt;
          &lt;DialogActions&gt;
            &lt;Button onClick={handleClose} color="primary"&gt;
              No
            &lt;/Button&gt;
            &lt;Button onClick={() =&gt; handleClose(callback)} color="primary"&gt;
              Yes
            &lt;/Button&gt;
          &lt;/DialogActions&gt;
        &lt;/Dialog&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Using it my code looks like this</p>
  
  <pre><code>import {AlertDialogSlide, DialogProvider} from './Dialog';
  ...
  
  ...
    &lt;DialogProvider&gt;
      &lt;AlertDialogSlide
        myPayload={payload}
      /&gt;
    &lt;/DialogProvider&gt;
  ...
  </code></pre>
  
  <p>However,i get an error saying that context is undefined and i cannot destructure needed values from context</p>
  
  <pre><code>×
  TypeError: Cannot destructure property 'dialogState' of 'context' as it is undefined.
  AlertDialogSlide
  C:/Users/DESIGNHIVE II/Desktop/sellervasiti/src/components/Dialog.jsx:43
  </code></pre>
  
  <p>if there is a better way of doing this without the whole context thing i would like links to resources also.</p>