title: ReactDOM.render is not rendering element created through React.createElement
body: <p>I created a modal component that utilizes React's context, and hooks for easy usage. But for some reason, the element that I want to render in the modal doesn't appear.</p>
  <p>Here's my code for the ModalContainer which contains the provider and the modal</p>
  <p><code>ModalContainer.tsx</code></p>
  <pre class="lang-js prettyprint-override"><code>export type ModalElement =
    | React.ComponentClass&lt;any, any&gt;
    | React.FC&lt;any&gt;
    | JSX.Element;
  
  const ModalContainer: React.FC = ({ children }) =&gt; {
    const [visible, setVisible] = useState(false);
  
    const modal = useRef&lt;HTMLDivElement&gt;(null);
  
    const showModal = (element: ModalElement) =&gt; {
      if (element &amp;&amp; modal.current) {
        if (React.isValidElement(element)) {
          ReactDOM.render(element, modal.current);
        } else {
          const el = React.createElement(
            element as React.ComponentClass&lt;any, any&gt; | React.FC&lt;any&gt;,
            {}
          );
  
          ReactDOM.render(el, modal.current);
        }
        setVisible(true);
      }
    };
  
    const dismissModal = () =&gt; {
      setVisible(false);
    };
  
    return (
      &lt;ModalContext.Provider value={{ showModal, dismissModal }}&gt;
        {children}
        &lt;Modal visible={visible} onClose={dismissModal} ref={modal} /&gt;
      &lt;/ModalContext.Provider&gt;
    );
  };
  
  export default ModalContainer;
  </code></pre>
  <p><code>useModal.ts</code></p>
  <pre class="lang-js prettyprint-override"><code>export const useModal = (element: ModalElement) =&gt; {
    const context = useContext(ModalContext);
  
    if (!context) {
      Error(`Can't get modal context`);
    }
  
    const show = useCallback(() =&gt; {
      context.showModal(element);
    }, [context, element]);
  
    const dismiss = useCallback(() =&gt; {
      context.dismissModal();
    }, [context]);
  
    return [show, dismiss];
  };
  </code></pre>
  <p>In a way that you'll use it as such:</p>
  <pre class="lang-js prettyprint-override"><code>const DivModal: React.FC = () =&gt; {
    return &lt;div&gt;Test&lt;/div&gt;
  }
  
  const Component: React.FC = () =&gt; {
    const [show, dismiss] = useModal(DivModal);
    
    const onClick = () =&gt; {
      show();
    }
  
    return &lt;button onClick={onClick}/&gt;
  }
  </code></pre>
  <p>The problem seems to happen when I create an element using <code>React.createElement</code> in the <code>ModalContainer.tsx</code> found specifically in this line:</p>
  <blockquote>
  <pre class="lang-js prettyprint-override"><code>const el = React.createElement(
    element as React.ComponentClass&lt;any, any&gt; | React.FC&lt;any&gt;,
    {}
  );
  
  ReactDOM.render(el, modal.current);
  </code></pre>
  </blockquote>
  <p>The modal renders properly if I replace <code>el</code> in the render function with a test JSX such as <code>&lt;div&gt;test&lt;/div&gt;</code>. Can't really figure out what's wrong so I'll post it here just in case anyone knows what the problem is. Thanks!</p>