https://www.pluralsight.com/guides/how-to-wrap-one-react-component-into-another

HOC.js

import React from 'react';

function Counter(props) {
  const { counter, setCounter } = props;

  return (
    <div>
      <h1>Functional Component Example for Counter</h1>
      <p>We clicked {counter} times</p>
      <button onClick={() => setCounter(counter + 1)}>Increase counter</button>
    </div>
  );
}

export default withCounterState(Counter);

function withCounterState(WrappedComponent) {
  return function (...props) {
    const [counter, setCounter] = React.useState(0);

    props['counter'] = counter;
    props['setCounter'] = setCounter;

    return <WrappedComponent {...props} />;
  };
}