如何正确地将功能组件包装到React HOC中

import React from 'react';

// 创建高阶组件函数
const withCounter = (WrappedComponent) => {
  // 创建新的类组件
  class WithCounter extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }

    incrementCount = () => {
      this.setState(prevState => ({
        count: prevState.count + 1
      }));
    }

    render() {
      // 渲染原始组件，并传递额外的功能和数据
      return (
        <WrappedComponent
          count={this.state.count}
          incrementCount={this.incrementCount}
          {...this.props}
        />
      );
    }
  }

  // 返回新的类组件
  return WithCounter;
};

// 原始组件
const MyComponent = ({ count, incrementCount }) => {
  return (
    <div>
      <h2>计数器：{count}</h2>
      <button onClick={incrementCount}>增加</button>
    </div>
  );
};

// 使用高阶组件包装原始组件
const WrappedComponent = withCounter(MyComponent);

export default WrappedComponent;