I want to understand why the data I am passing as props into the react functional component is showing as undefined?

See more:

Javascript

React

ReactJS

I have been given a ready made react component, in which I need to pass data as props but somehow I am not able to see the props data when I console log it. Can someone help me understand if I am passing the prop correctly .I am not aware what type of functional component is being used here and if the prop I am passing is correctly entered. I pass the same prop to other class based components which do show the data properly.I tried to console log the props in useEffect() as well but still no data is showing

 const DialogTitle = withStyles(styles)((props) => {
        
        const { children, classes, onClose, routeHappyData, ...other } = props;
        console.log(routeHappyData);
        return (
            <muidialogtitle disabletypography="" classname="{classes.root}" {...other}="">
                <typography variant="h6">{children}
                {onClose ? (
                    <iconbutton aria-label="close" classname="{classes.closeButton}" onclick="{onClose}">
                        <closeicon>
                    
                ) : null}
            
        );
    });  

``


```The prop I want to pass is "routeHappyData" which is showing undefined when console logged.
In the Parent class component i am passing the prop this way given below```

        render() {
            let {      
              routeHappyData
              
                } = { ...this.props };
            return (
    
         <div>{noOfStops}</div>
                                {<covidhealthsafety routehappydata="{this.props.routeHappyData}/">}
                    
    )

What I have tried:

I tried to console log the props in useEffect() as well but still no data is showing