Flip one card at a time using React-card-flip

Im using react-card-flip to display data on the cards. Right now, I want to flip one card at a time when the user clicks the "Check Availability" button. However, whenever the user clicks on one button all the cards seem to flip on the page. Is there a way to fix this? I used this npm package https://www.npmjs.com/package/react-card-flip. I've input everything on the page as directed.

export default class Players extends React.Component {
   componentDidMount() {
      // Function for today
      let date = new Date();
      let day = date.getDay();
      console.log(day);
      let today =
         day === 0
            ? "sunday"
            : day === 1
            ? "monday"
            : day === 2
            ? "tuesday"
            : day === 3
            ? "wednesday"
            : day === 4
            ? "thursday"
            : day === 5
            ? "friday"
            : "saturday";
      console.log(today);
   }

   constructor() {
      super();
      this.state = {
         isFlipped: false,
      };
      this.handleClick = this.handleClick.bind(this);
   }

   handleClick(e) {
      e.preventDefault();
      this.setState((prevState) => ({ isFlipped: !prevState.isFlipped }));
   }

   render() {
      return (
         <AppTemplate>
            <h4 className="my-4 text-center text-color-white">Players</h4>
        <ReactCardFlip
           isFlipped={this.state.isFlipped}
           flipDirection="horizontal"
        >
           <div>
              <UserDataFront1 />
              <button
                 className="btn btn-primary btn-success mb-5"
                 onClick={this.handleClick}
              >
                 Click to see availability
              </button>
           </div>

           <div>
              <UserDataBack1 />
              <button
                 className="btn btn-primary btn-success mb-5"
                 onClick={this.handleClick}
              >
                 Back to info
              </button>
           </div>
        </ReactCardFlip>

        <ReactCardFlip
           isFlipped={this.state.isFlipped}
           flipDirection="horizontal"
        >
           <div>
              <UserDataFront2 />
              <button
                 className="btn btn-primary btn-success mb-5"
                 onClick={this.handleClick}
              >
                 Click to see availability
              </button>
           </div>

           <div>
              <UserDataBack2 />
              <button
                 className="btn btn-primary btn-success mb-5"
                 onClick={this.handleClick}
              >
                 Back to info
              </button>
           </div>
        </ReactCardFlip>

        <ReactCardFlip
           isFlipped={this.state.isFlipped}
           flipDirection="horizontal"
        >
           <div>
              <UserDataFront3 />
              <button
                 className="btn btn-primary btn-success mb-5"
                 onClick={this.handleClick}
              >
                 Click to see availability
              </button>
           </div>

           <div>
              <UserDataBack3 />
              <button
                 className="btn btn-primary btn-success mb-5"
                 onClick={this.handleClick}
              >
                 Back to info
              </button>
           </div>
        </ReactCardFlip>

        <ReactCardFlip
           isFlipped={this.state.isFlipped}
           flipDirection="horizontal"
        >
           <div>
              <UserDataFront4 />
              <button
                 className="btn btn-primary btn-success mb-5"
                 onClick={this.handleClick}
              >
                 Click to see availability
              </button>
           </div>

           <div>
              <UserDataBack4 />
              <button
                 className="btn btn-primary btn-success mb-5"
                 onClick={this.handleClick}
              >
                 Back to info
              </button>
           </div>
        </ReactCardFlip>

        <ReactCardFlip
           isFlipped={this.state.isFlipped}
           flipDirection="horizontal"
        >
           <div>
              <UserDataFront5 />
              <button
                 className="btn btn-primary btn-success mb-5"
                 onClick={this.handleClick}
              >
                 Click to see availability
              </button>
           </div>

           <div>
              <UserDataBack5 />
              <button
                 className="btn btn-primary btn-success mb-5"
                 onClick={this.handleClick}
              >
                 Back to info
              </button>
           </div>
        </ReactCardFlip>
     </AppTemplate>
  );

} }