Pass function to custom hook - reactjs

Question

This is my custom component. Basically what is does is it shows modal on failure or success of the api calls.
export const useMessageModal = () => {
const [IsModalVisible, setIsModalVisible] = useState(false);
const [Message, setMessage] = useState(null);
return [
() =>
IsModalVisible ? (
<CModal
isVisible={IsModalVisible}
modalMsg={Message}
onPressModal={() => setIsModalVisible(false)} //hideModal
/>
) : null,
() => setIsModalVisible(true), //showModal
msg => setMessage(msg),
];
};
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?
according to Shubham Verma answer, I've updated my code
import React, { useState, useEffect } from "react";
import "./styles.css";
const CModal = ({ onPressModal }) => {
return (
<div
onClick={() => {
console.log("TEst");
onPressModal();
}}
>
Click me to check function call(open console)
</div>
);
};
export const useMessageModal = (customFuntion) => {
const [IsModalVisible, setIsModalVisible] = useState(false);
const [Message, setMessage] = useState(null);
return [
() =>
IsModalVisible ? (
<CModal
isVisible={IsModalVisible}
modalMsg={Message}
onPressModal={customFuntion} //hideModal
/>
) : null,
() => setIsModalVisible(true), //showModal
(msg) => setMessage(msg)
];
};
export default function App() {
const [test2, setTest2] = useState(false);
const [test, check] = useMessageModal(
() => (test2 ? console.log("gjghjgj") : console.log("hello")),
[test2]
);
useEffect(() => {
check();
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<button onClick={() => [console.log(test2), setTest2(!test2)]}>
test
</button>
{test()}
<h2>Start editing to see some magic happen!</h2>
</div>
);
}

Answer 1

You can simply pass function as a arguement ins useMessageModal. Here is the poc:
import React, { useState, useEffect } from "react";
import "./styles.css";
const CModal = ({ onPressModal }) => {
return (
<div
onClick={() => {
console.log("TEst");
onPressModal();
}}
>
Click me to check function call(open console)
</div>
);
};
export const useMessageModal = (customFuntion) => {
const [IsModalVisible, setIsModalVisible] = useState(false);
const [Message, setMessage] = useState(null);
return [
() =>
IsModalVisible ? (
<CModal
isVisible={IsModalVisible}
modalMsg={Message}
onPressModal={customFuntion} //hideModal
/>
) : null,
() => setIsModalVisible(true), //showModal
(msg) => setMessage(msg)
];
};
export default function App() {
const [test, check, anotherCheck] = useMessageModal(() =>
console.log("hello")
);
useEffect(() => {
check();
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{test()}
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
Here is the demo: https://codesandbox.io/s/custom-hook-function-37kc8?file=/src/App.js