title: React Hooks return children wrapping component
body: <p>I have created a custom modal hook that extending <code>react-modal</code> library, but I have a problem to work with inputs when it has onChange prop on the input, for some reason, it rerenders useModalHook component every time when input change happened. I am new to hooks, but is there a way to pass a hook wrapper that doesn't rerender the component and leaves it as is. My goals are to wrap any component or content that I pass through my custom modal so that it has a custom layout as I needed.</p>
  
  <pre><code>import * as React from "react";
  import Modal from "react-modal";
  import styles from "../styles.scss";
  
  export const useModalHook = (
    {
      title = "",
      modalType = MODAL_TYPE.small,
      closeIcon = true,
    }
  ) =&gt; {
    const [ getOpenModal, setOpenModal ] = React
      .useState&lt;boolean&gt;(false);
  
    React.useEffect(() =&gt; {
      if (state) {
        setOpenModal(!state);
      }
      return () =&gt; setOpenModal(false);
    }, [ state ]);
  
    const handleOnRequestClose = (force = false) =&gt; setOpenModal(force);
  
    return {
      Modal: ({ children }) =&gt; getOpenModal &amp;&amp; (
        &lt;Modal
          isOpen={getOpenModal}
          onRequestClose={() =&gt; handleOnRequestClose()}
          contentLabel={title}
          appElement={document.getElementById("__next")}
        &gt;
          &lt;div className={styles.modalWrapper}&gt;
            &lt;div className={styles.modalTitle}&gt;
              {title !== "" ? &lt;h2&gt;{title}&lt;/h2&gt; : null}
              {closeIcon ? (
                &lt;button
                  className={styles.closeModal}
                  onClick={() =&gt; setOpenModal(!getOpenModal)}
                &gt;x&lt;/button&gt;
              ) : null}
            &lt;/div&gt;
            {children}
          &lt;/div&gt;
        &lt;/Modal&gt;
      ),
      closeModal: () =&gt; setOpenModal(false),
      toggleModal: () =&gt; setOpenModal(!getOpenModal),
      modalOpen: getOpenModal,
    };
  };
  
  </code></pre>
  
  <p>Usage of the <code>useModalHook</code> in component</p>
  
  <pre><code>
  import * as React from "react";
  import { useModalHook } from "components/UI/Hooks/useModalHook";
  
  const Component = () =&gt; {
    const initialData = { Test: "" };
  
    const { Modal, toggleModal, modalOpen, closeModal } = useModalHook({
      title: "Cool Modal"
    });
  
    const handleOnChange = e =&gt; {
      return setData({
        ...getData,
        [ name ]: value
      });
    };
  
    React.useEffect(() =&gt; {
      setData(initialData);
    }, [ modalOpen ]);
  
    return (
      &lt;&gt;
        &lt;button onClick={toggleModal}&gt;Show&lt;/button&gt;
        &lt;Modal&gt;
          &lt;div className="modal_content"&gt;
            &lt;input type="text" onChange={handleOnChange} value={getData.Test} name="Test"/&gt;
          &lt;/div&gt;
        &lt;/Modal&gt;
      &lt;/&gt;
    );
  };
  
  export default Component;
  
  </code></pre>