I tried to play an audio file with a react-audio-player using the external button. i go through its documentation and find that I can do it by creating a reference of an audio component and call play event from my external button but somehow I faced the error.

Package name - react-audio-player

Code

import ReactAudioPlayer from 'react-audio-player';

render()
{
return(
{songs ?
                            songs.map((song, index) =>
                            (
                                <tr key={index}>
                                    <td><img className="rounded-all img-circle" src={song.cover} alt="playlist cover" /></td>
                                    <td>{song.name}</td>
                                    <td>{song.gener}</td>
                                    <td className="d-flex justify-content-end">
                                        <ReactAudioPlayer
                                            src={song.song_mp3}
                                            ref={(element) => { this.rap = element; }}
                                        />
                                        <i className="fa fa-play-circle d-flex align-items-center mgr-2 text-white play-button" onClick={this.rap.onPlay}></i>
                                    </td>
                                </tr>
                            ))
                            : null}
))

TypeError: Cannot read properties of undefined (reading 'onPlay')