title: modal not shown in storybook
body: <p>I have a working modal component which i need to show in storybook as well. It depends on the props
  to show and close. For example, if i need to show modal i would have to do the following</p>
  
  <pre><code>const Demo = () =&gt; {
      const [open, setOpen] = useState(false)
      return (
          &lt;&gt;
              &lt;button onClick={() =&gt; setOpen(true)}&gt;Open Modal&lt;/button&gt;
              &lt;Modal open={open} onClose={() =&gt; setOpen(false)}&gt;
                  &lt;Modal.Header&gt;Modal Header goes here&lt;/Modal.Header&gt;
                  &lt;Modal.Content&gt;Modal Content goes here&lt;/Modal.Content&gt;
                  &lt;Modal.Footer&gt;Modal Footer goes here&lt;/Modal.Footer&gt;
              &lt;/Modal&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  
  <p>I am using ReactDOM.createPortal to render modal so for this i have created a div element with an id
  modal and inside it another div element is created where the modal appears. For such i have created a
  story of modal as follow</p>
  
  <pre><code>storiesOf('Modals', module)
    .addDecorator(storyFn =&gt; (
      &lt;&gt;
        &lt;div id="modal"&gt;
          &lt;div&gt;{storyFn()}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    ))
    .addDecorator(withKnobs)
    .add('Modals - Basic', () =&gt; (
      &lt;&gt;
        &lt;button type="button"&gt;Show Modal&lt;/button&gt;
        &lt;Modal open={boolean('open', false)}&gt;
          &lt;Modal.Header&gt;Modal Header goes here&lt;/Modal.Header&gt;
          &lt;Modal.Content&gt;Modal Content goes here&lt;/Modal.Content&gt;
          &lt;Modal.Footer&gt;Modal Footer goes here&lt;/Modal.Footer&gt;
        &lt;/Modal&gt;
      &lt;/&gt;
    ))
  </code></pre>
  
  <p>My modal is created in the following way</p>
  
  <pre><code>const el = document.createElement('div')
  const modal = document.getElementById('modal')
  
  return ReactDOM.createPortal(
      &lt;&gt;
        &lt;Backdrop onClick={e =&gt; closeModal(e)}&gt;
          &lt;ModalBox&gt;
            &lt;Wrapper position={position} {...props}&gt;
              {children}
              &lt;CloseIcon icon={faTimesCircle} /&gt;
            &lt;/Wrapper&gt;
          &lt;/ModalBox&gt;
        &lt;/Backdrop&gt;
      &lt;/&gt;,
      el,
    )
  </code></pre>