onClick() not working on several viewports

I am trying to make a portfolio for my student organization and am using the package react-flip-card for profiles of the team members in that organization. Interestingly enough, when I viewed in on my iPad Pro, on landscape view (width > 1024px), I was able to trigger the flip animation by pressing the button. But when I was on portrait view (width: 1024px), suddenly the flip card will not trigger.

You can access my website and try it: https://ibsa-display-sub.herokuapp.com/about

Here is my code:

PeopleCard.js

import React, {Component} from 'react'
import styled from 'styled-components'
import {mediaQueries, colors} from '../../shared/config'
import ReactCardFlip from 'react-card-flip'

import overlay from '../../images/overlay.png'

// width change for officers in about us
const FrontContainer = styled.div`
   box-shadow: 15px 15px 5px;
   background-color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   ${mediaQueries.tablet} {
      box-shadow: 7.5px 7.5px 3.725px;
   }
`

const BackContainer = styled.div`
   box-shadow: 10px 10px 5px;
   border-radius:1em;
   height: ${props => `${props.cardHeight}px`};
   background-image:  url(${props => props.overlay}), url(${props => props.imgURL});
   background-position: center top;
   background-size: cover;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   ${mediaQueries.tablet} {
      box-shadow: 7.5px 7.5px 3.725px;
   }
`

const Image = styled.img`
   /* border-top-left-radius: 1em;
   border-top-right-radius: 1em;
   border-bottom: 1px solid black; */
`;

const Description = styled.div`
   text-align: center;
   margin: 1em 0.5em;
`;

const Name = styled.h2`
   font-weight: 800;
   font-size: 2em;
   margin-bottom: 0;
`;

const Title = styled.h4`
   font-weight: 300;
`

const Button = styled.button`
   border-radius:1em;
   margin-bottom: ${props => props.side === "front" ? "1em" : "0"};
   margin-top: ${props => props.side === "back" ? "1em" : "0"};
   cursor: pointer;
   height: 3em;
   background-color: ${colors.blue};

   ${mediaQueries.iphone7} {
      padding: 0.5em 2em;
   }
`;

const Summary = styled.p`
   margin: 1em 2.5em;
   font-weight: 400;
   text-align: justify;
   color: ${colors.white};
   font-weight: 400;
`;

export default class PeopleCard extends Component {
   constructor() {
      super();
      this.imgref = React.createRef();
      this.frontContainer = React.createRef();;
      this.state = {
         isFlipped: false,
         cardHeight : 0,
      };
      this.handleClick = this.handleClick.bind(this);
      this.updateHeight = this.updateHeight.bind(this);
   }
   
   /**
    * handles the flip card animation for people card
    */
   handleClick(e) {
      e.preventDefault();
      this.setState(prevState => ({ isFlipped: !prevState.isFlipped }));
   }

   componentDidMount() {
      this.updateHeight();
      window.addEventListener("resize", this.updateHeight);
   }

   componentWillUnmount() {
      window.removeEventListener("resize", this.updateHeight);
   }

   /**
    * updateHeight() updates the height of the container for the front side
    * of the car whenever it's changed. The height is then used for BackContainer
    * to have reference to (passed in as a prop), so that size is consistent
    */
   updateHeight() {
      this.setState({ cardHeight: this.frontContainer.current.clientHeight })
   }

   render() {
      const {imgURL, name, title, bio, instalink, lilink} = this.props;
      const {cardHeight} = this.state;
      return (
         <ReactCardFlip 
            className="card-container"
            isFlipped={this.state.isFlipped} 
            flipDirection="horizontal"
            infinite="true"
         >
            <FrontContainer ref={this.frontContainer} 
            id="get-height">
               <Image 
                  src={imgURL} 
                  ref={this.imgref}
                  onLoad={() => {
                     if (cardHeight < 400) {
                        this.setState({
                           cardHeight: cardHeight + this.imgref.current.clientHeight
                        })
                     }
                  }}
                  className="img-fluid"
               />
               <Description >
                  <Name className="heading"> {name} </Name>
                  <Title> {title} </Title>
               </Description>
               <Button side="front" onClick={this.handleClick}> Learn more </Button>
            </FrontContainer>
            <BackContainer 
               cardHeight={cardHeight}
               overlay={overlay}
               imgURL={imgURL}
            >
               <Summary>
                  {bio}
               </Summary>
               <Button side="back" onClick={this.handleClick}>Back</Button>
            </BackContainer>
         </ReactCardFlip>
         
      )
   }
}

config.js

export const colors = {
   blue : "#1F8AD0",
   white: "#ffffff",
   lightblue: "#A0CAEA",
}

export const mediaQueries = {
   iphone7: "@media screen and (max-width: 480px)",
   notIphone7: "@media screen and (min-width: 481px)",
   beforeMobile : "@media screen and (min-width: 481px) and (max-width: 700px)",
   mobile: "@media screen and (max-width: 700px)",
   notMobile: "@media screen and (min-width: 701px)",
   notTablet: "@media screen and (min-width: 1024px)",
   tablet: "@media screen and (max-width: 1024px)",
};

EDIT: SOLVED! it turns out it has something to do with a z-index that made the buttons and forms unclickable.