I'm going through a problem ! (React.js)

[billy.s56]

Hey guys ! I’m going through a problem … I’m want to pass a function as prop and the component where I’m passing is a class component and from this class component I want to again pass this prop into a function component.
But every time I’m finding the prop value is undefined in the console !
Anyone have any suggestions ?? please lemme know !

[billy.s56]

fuction:

 const [productID, setProductID] = useState('');

   const DisplayProduct =(e)=>{     
     e.preventDefault();
     const prodObj = {
       productID:productID
     }
    // console.log(prodObj);
     setProductID(''); 
   }

Passing prop:

` <InvoiceToPrint ref={(el) => (componentRef = el)} DisplayProduct={DisplayProduct}/>`

InvoiceToPrint( Class Component):

class InvoiceToPrint extends Component {
  constructor(props){
    super(props);

      this.product = this.props.DisplayProduct;
  }
  
    render() {
      return(
        <Invoice product={this.product}/>
      )
       
    }
}

function Component:

const Invoice = (props) => {
  const prod = props.DisplayProduct;
  console.log(prod);
}

In console its showing the value: undefined