React：当我单击父元素时，音频元素仅播放一次

Question

作为React组件的一部分，在render函数中，我将音频元素作为另一个元素的子元素。

<td onClick={this.handlePick}>

</td>
<td onClick={this.handlePick}>
</td>
 ...

组件中的构造函数和handlePick为：

 constructor(props){
    ...
    this.state={
            url: '' 
          }
     }

handlePick(e){
    const option=e.target.id;
    const mySound=sounds[option] // sounds is array of url pointing to diferent sounds
    this.setState(()=>{
            return {
                url: mySound
                }
            }
        )

    const audio= new Audio(mySound)
    audio.play()
   }

单击任何td元素（音频元素的父元素）时效果很好，但是如果我第二次单击，则无法正常工作。我需要单击另一个td元素才能单击上一个（只有一次）。