React.js-无法连接音频源中的变量

我正在根据日期和路径动态创建音频源。

这是我的工作代码:

var cdrdata2 =  this.props.cdrdata.map((data,index)=>{
 return(
   <tr key = {index} style={{display:'table',width:'100%',backgroundColor:'white'}}>
    <td width = "11.3%" >{`${data.startDate}`}</td> //12-09-2020
    <td width = "9.4%">{`${data.cdr_recording_file_path}`} // monitor/auto-1589470814-367-7865290090.wav
    <button onClick={this.playAudio}>
      <span>Play</span>
    </button>
    <audio className="audio-element">
      <source src="http://localhost/cdr/phone_cdr/`${data.startDate}`}/{`${data.cdr_recording_file_path}`}"></source>
    </audio>
    </td>
  </tr>  
    
 )  

预期产量:

http://localhost/cdr/phone_cdr/12-09-2020/monitor/auto-1589470814-367-7865290090.wav

实际输出:

http://localhost/cdr/phone_cdr/%60$%7Bdata.startDate%7D%60%7D/%7B%60$%7Bdata.cdr_recording_file_path%7D%60%7D 404 (Not Found)

有人可以纠正我吗?提前致谢。