尝试使用JSX React中的按钮更改CSS类

我正在尝试编写一个react类，其中render函数包含一个按钮，单击该按钮后，它将css类从一个更改为另一个，以及将文本从可用更改为采取。文本更改有效，但CSS更改无效。我不确定下面的代码在哪里出错。我还尝试在我的类方法中编写一个切换类函数，该函数也不会进行切换。不太强大的html和JSX，所以任何帮助将不胜感激。谢谢。

class Singles extends React.Component {
  constructor() {
    super();
    this.state = {
      isSingle: false,
    };
  }
  toggleIsSingle() {
    this.setState({
      isSingle: !this.state.isSingle
    });
  }
  render() {
    const { name, description, id } = this.props.pet;
    const isSingle = this.state.isSingle;
    return (
      <div
        key={id}
        className={this.state.isSingle ? 'single.taken' : 'single'}
      >
        <div id="info">
          <p>{name}</p>
          <p>{description}</p>
          <div>{this.state.isSingle ? 'Taken!' : 'Available'}</div>
          <button onClick={() => this.toggleIsSingle()}>Toggle Status</button>
        </div>
      </div>
    );
  }
}