I try to use react-to-print in next js but lib is for react here is what I'm trying to do

here is my index.tsx

import PrintComponent from './PrintComponent';
const Index = ()  => {
  return (
    <>
      <ReactToPrint trigger={() => <button>Print this out!</button>} content={() => React.componentRef} />
      <div className="hidden">
        <PrintComponent ref={el => (React.componentRef = el)} />
      </div>
    </>
  );
};

export default Index;

I try to import PrintComponent here is my PrintComponent

export function PrintComponent() {
  return (
    <div>
      <p>Count is: 1</p>
    </div>
  );
}

export default PrintComponent;

after I click button nothing happen but if I change my index.tsx

import { PrintComponent } from './PrintComponent';

and my PrintComponent look like this

export class PrintComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Count is: 1</p>
      </div>
    );
  }

}

It's work!

anyone can help me explain how it's different and how can I convert them into next