Call custom React async hook within a component and se it's state again

Question

I have a custom react hook fetching number of comments from an API that looks like this:

export async function useFetchNumberOfComments(articleId) {
  const [numberOfComments, setNumbeOfComments] = useState(0);

  useEffect(() => {
    (async () => {
      try {
        const response = await axios.get(`https://example.com/${articleId}`, {
          headers: {
            "Content-Type": "application/json",
            "X-API-KEY": "X",
            Authorization: localStorage.getItem("access_token"),
          },
        });

        const data = await response.data;

        setNumbeOfComments(data);
      } catch (err) {
        console.log(err);
      }
    })();
  }, []);

  return numberOfComments;
}

And I want to use it in a Article component that looks like this:

import { useFetchNumberOfComments } from "../utils";

const SingleArticle = () => {
  let { id } = useParams();
  // Important state
  const [numOfComments, setNumOfComments] = useState(0);
  // Not important states
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  const [content, setContent] = useState("");
  const [comments, setComments] = useState([]);
  const [commentAuthor, setCommentAuthor] = useState("");
  const [commentContent, setCommentContent] = useState("");
  const [imageId, setImageId] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [createdAt, setCreatedAt] = useState();

  const postComment = async (e) => {
    e.preventDefault();

    const dataToSend = {
      articleId: id,
      author: commentAuthor,
      content: commentContent,
    };

    try {
      await axios.post(`https://example.com/comments`, dataToSend, {
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "X",
          Authorization: localStorage.getItem("access_token"),
        },
      });

      
      // Here, fetch the number of comments from my custom hook and update numOf Comments in this component
      setCommentAuthor("");
      setCommentContent("");
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
      <form onSubmit={postComment}>
        // Here are some inputs, labels and a submit button
      </form>  
      <h4 className={styles.h1}>Comments({numOfComments})</h4>
    </>
  );
};

export default SingleArticle;

Now, the problem is that I have no idea how to do the mentioned activity within the Article component: Once the form data(for comment) are sent, trigger the useFetchNumberOfComments custom hook and set the numOfComments state inside article component to the newly fetched data.