有2个问题与React，改变单一按钮的颜色点击和播放不同的声音在每次点击

import React, { Component } from 'react';

class Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'red',
      sound: 'sound1.mp3'
    };
  }

  handleClick = () => {
    const { color, sound } = this.state;
    // 根据当前状态的值来改变按钮的颜色和播放声音
    const newColor = color === 'red' ? 'blue' : 'red';
    const newSound = sound === 'sound1.mp3' ? 'sound2.mp3' : 'sound1.mp3';
    this.setState({
      color: newColor,
      sound: newSound
    });
    // 播放声音的逻辑
    // ...
  }

  render() {
    const { color } = this.state;
    return (
      <button style={{ backgroundColor: color }} onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

export default Button;