Give play to audio from father to son in react

Question

i' m having problems when I try to play an audio from APP to GrandChild on react. The GrandChild recibes props with the data and the mp3. The mp3 changes according to the id.(I have this on a mock) Because I have to sincronize with others players I'm trying to do the logic part in the father of all, app. Thanks! here is my code:

Child.js

const mock = {
        "type": "CONTENT",
        "content": {
            "id": "5ce55601df641d7b01cd3592",
            "name": "Program 1",
            "title": "Program 1",
            "description" : 'Lorem Ipsum',
            "assets" : {
                "mp3": 'https://www.computerhope.com/jargon/m/example.mp3'
            }
        }
    }


export default class ContentAudioListItem extends React.Component {
    render(){
        return (
            <React.Fragment>
                <div className="content-audio-list-item">
                    <div className='header'>
                        <div className='img'>
                            <img alt='' src={imageSlider} className="img-slider img-responsive pull-right" />
                        </div>

                    </div>
                    <div className="player-list">
                       <GrandChild 
                        data={mock.content} // send mock to grandchild
                        handleName={this.props.handleName} 
                        handlePlay={this.props.handlePlay} 
                        showPlay={this.props.showPlay} 
                        showPause={this.props.showPause} /> 
                    </div>
                </div>
            </React.Fragment>
        )
    }

}

GrandChild.js

export default class ContentSoundItem extends React.Component{

    handlePlaySound = async() => {
        this.props.handleName(this.props.data) // send data to app
    }

   render(){

    return (
        <React.Fragment>
                <ul className="content-audio-list-item">
                    <li className='player-info'>
                        <div>
                            <div className="info">
                                <p className="player-title">{this.props.data.title}</p>
                             </div>
                            <div className='player-icon'>
                                <audio id={this.props.data.id}  src={this.props.data.assets.mp3}></audio>
                                <div onClick={this.handlePlaySound}>
                                    <FaPlay className="icon-play" />
                                </div>
                                <div onClick={this.handlePlaySound}>
                                    <FaPauseCircle className="icon-play"/>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
        </React.Fragment>
    )
   }

}

APP.JS

handleName = (data) => {
    console.log('data', data)
    if(data != undefined) {
      this.setState({audio: true})
      this.setState({mp3AudioInfo : data})
      console.log(data.id)
      $('data.id').play(); // Cannot read property 'play' of undefined
    } else {
      console.log('NO CHANGE')
    }
  }