react.js – A kind of function factory within react component

In the app that works only for training purposes I have a React component that serves(among others) as an ‘event catcher’ for all events that happen on its rendered children. It contains (at the time being, besides other stuff) eight expressions similar to the following:

  const debouncedFetchSingleBook = useCallback(
    // using lodash debounce()
    debounce(target => {
      const button = target.closest("button");

      // Catch event target.  In this case, it is fetchSinglebook.
      fetchSingleBook(redirect, button.dataset.content, true);
    }, 200),
    (fetchSingleBook)
  );

The duty of such the expression is to
return a callback that debounces and executes an event action fired on button pressing.

I tried to write a function that would take actual function as argument and return what described above, in order to keep code DRY. So, here is what I have written:

const useCreateDebouncedCallback=(fn)=>{

  const result = useCallback(
    debounce(target => {
      const button = target.closest("button");
      fn(button.dataset.content);
    }, 200),
    (fn)
  );

  return result;
}

That is defined above component self where it is called, in the same file. Basically, it works(no error, task done).

My question is whether:
It conforms to React standards?
Are there any possible failures in the code that do not expose themselves immediately?

This is my first custom React Hook. Any help would be appreciated.