title: Pass function to custom hook
body: <p>This is my custom component. Basically what is does is it shows modal on failure or success of the api calls.</p>
  <pre><code>export const useMessageModal = () =&gt; {
    const [IsModalVisible, setIsModalVisible] = useState(false);
    const [Message, setMessage] = useState(null);
  
    return [
      () =&gt;
        IsModalVisible ? (
          &lt;CModal
            isVisible={IsModalVisible}
            modalMsg={Message}
            onPressModal={() =&gt; setIsModalVisible(false)} //hideModal
          /&gt;
        ) : null,
      () =&gt; setIsModalVisible(true), //showModal
      msg =&gt; setMessage(msg),
    ];
  };
  </code></pre>
  <p>In one of the components, I want to navigate to another page or call some context action on the modal button for that I want to pass some functions to this custom hook.
  Does anyone have any idea?</p>
  <hr />
  <p>according to Shubham Verma answer, I've updated my code</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  const CModal = ({ onPressModal }) =&gt; {
    return (
      &lt;div
        onClick={() =&gt; {
          console.log(&quot;TEst&quot;);
          onPressModal();
        }}
      &gt;
        Click me to check function call(open console)
      &lt;/div&gt;
    );
  };
  
  export const useMessageModal = (customFuntion) =&gt; {
    const [IsModalVisible, setIsModalVisible] = useState(false);
    const [Message, setMessage] = useState(null);
  
    return [
      () =&gt;
        IsModalVisible ? (
          &lt;CModal
            isVisible={IsModalVisible}
            modalMsg={Message}
            onPressModal={customFuntion} //hideModal
          /&gt;
        ) : null,
      () =&gt; setIsModalVisible(true), //showModal
      (msg) =&gt; setMessage(msg)
    ];
  };
  
  export default function App() {
    const [test2, setTest2] = useState(false);
    const [test, check] = useMessageModal(
      () =&gt; (test2 ? console.log(&quot;gjghjgj&quot;) : console.log(&quot;hello&quot;)),
      [test2]
    );
    useEffect(() =&gt; {
      check();
    }, []);
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;button onClick={() =&gt; [console.log(test2), setTest2(!test2)]}&gt;
          test
        &lt;/button&gt;
        {test()}
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>