react-to-print gives empty screen for printing

Question

I am working on an ionic react application. clicking on Print this out! taking me to the print screen. But getting an empty screen to print.

My Print Component:

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

import { ComponentToPrint } from './ComponentToPrint';

const Print = () => {
  const componentRef:any = useRef();

  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};


export default Print

My ComponentToPrint:

import React from 'react'

export const ComponentToPrint = React.forwardRef((props, ref: any) => {
  return (
    <div ref={ref}>My cool content here!</div>
  );
});

My App Component:

import { createContext, useEffect, useMemo, useState } from 'react';
import Print from './components/Print';

setupIonicReact();

export const AppContext = createContext<any>(null)

const App: React.FC = () => {
  const [config, setConfig] = useState<any>(null)
  return (
    <AppContext.Provider value={{
      config,
    }}>
      <IonApp>
        <IonReactRouter>
          <IonSplitPane contentId="main">
            <Menu />
            <IonRouterOutlet id="main">
              <Route path="/barcode" exact={true}>
                <Print/>
              </Route>
            </IonRouterOutlet>
          </IonSplitPane>
        </IonReactRouter>
      </IonApp>
    </AppContext.Provider>
  );
};
export default App;

I expected to see "My cool content here!". but the screen is empty. please help me with this.