const useFirstHook = () => {
  ...
 
  return {
    className,
    style,
    onClick,
  };
};
 
const useSecondHook = () => {
  ...
 
  return {
    value,
    style,
    onClick,
  };
};

const MyComponent = () => {
  const first = useFirstHook(...);
  const second = useSecondHook(...);
 
  const handleClick = useCallback(event => {
    first.onClick(event);
    second.onClick(event);
  }, [first, second]);
 
  return (
    <input
      type="text"
      {...first}
      {...second}
      className={[first.className, second.className].join(' ')}
      style={{ ...first.style, ...second.style }}
      onClick={handleClick}
    />
  );
}

import mergeProps from 'merge-props';
 
const MyComponent = () => {
  const first = useFirstHook(...);
  const second = useSecondHook(...);
 
  return (
    <input
      type="text"
      {...mergeProps(first, second)}
    />
  );
}

import mergeProps from 'merge-props';
 
const MyComponent = () => {
  const first = useFirstHook(...);
  const second = useSecondHook(...);
 
  return (
    <input merge={mergeProps}
      type="text"
      {...first}
      {...second}
    />
  );
}