Impossible d'appeler la fonction du composant parent à partir du composant enfant dans React

Je suis nouveau à réagir (j'ai commencé cette semaine). J'ai un composant parent et un composant enfant et je souhaite appeler une méthode parent dans le composant enfant. J'ai recherché dans stackoverflow et mon code est le même que toutes les solutions que j'ai obtenues.

J'ai un composant parent ProductDisplay qui affiche une liste de produits :

import React, { Component } from 'react';
import data from '../data'
import Product from '../Product/product.component'

class ProductDisplay extends Component {

    constructor(props) {
        super(props)
        this.state = {
            pdts: data,
        }
    }

    addToCart = () => {
        console.log('add to cart');
    }

    render() {
        return (            
                this.state.pdts.map(product => (
                <Product
                    key={product.id}
                    product={product}
                    addToCart={this.addToCart}
                />
            ))
        );
    }
}
export default ProductDisplay;

et le composant enfant est Product qui rend chaque produit

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import "./product.css";
class Product extends Component {
    constructor(props) {
        super(props);
    }

    handleClick = () => {
        this.props.addToCart();
        console.log('click');
    }

    render() {
        const product = this.props.product;
        console.log(this.props.addToCart);
        return (
            <div className="product">
                <img className="image" src={product.imgPath} alt={product.name} />
                <p className="name">{product.name}</p>
                <p className="price">Price: ₹{product.price}</p>
                <p className="category">Category: {product.category}</p>
                <button className="add">Add To Cart <i className="fa fa-cart-plus" 
                        onClick={this.handleClick}></i></button>
            </div>
        );
    }
}
export default withRouter(Product);

Je souhaite appeler une fonction addToCart de ProductDisplay à partir de Product en cliquant sur le bouton mais cela ne fonctionne pas. La fonction handleClick du composant enfant lui-même n'est pas appelée. Par conséquent, la fonction parente qui est appelée à partir de handleClick n'est pas non plus appelée.

Je ne sais pas non plus si ce que je fais fonctionnerait pour lier la méthode à tous les boutons. S'il vous plaît aider