React Function Higher Order Component

Higher Order Component not working for functional component.

I am trying to create a sample functional HOC. I am using react hook useState and passing the state to the passed component. Below is my code

function HOC(WrapperComponent) {
  // outside of return function
  const [course] = useState({ id: 0, name: "Raja/Kondla" });
  return function() {
     return <WrapperComponent course={course} />;
  };
}

const Comp = HOC(({ course }) => {
  return (
    <>
      <div>HOC</div>
      <div>{course.id}</div>
      <div>{course.name}</div>
      <div>-------------------</div>
    </>
  );
});

ReactDOM.render(<Comp />, rootElement);

When I run it I am getting below error.

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

but if I put below code as HOC working fine.

function HOC(WrapperComponent) {
  return function() {
      // inside return function
    const [course] = useState({ id: 0, name: "Raja/Kondla" });
    return <WrapperComponent course={course} />;
  };
}

getting the result output:

HOC
0
Raja/Kondla

Can someone explain me what is the reason? and using functional HOC, will there be any performance impact?

Thanks in advance