Как изменить размеры (уменьшить) существующие div при использовании React-Pose

Question

У меня есть четыре столбца на домашней странице. Вот что я пытаюсь сделать...

Я приведу в качестве примера только анимацию первого столбца, для краткости. Если я щелкну первый столбец (используя React-Pose "нажимаемое"), он изменит размер до 75% просмотра (в данном случае 3 из 4 колонки). Когда это происходит, оставшиеся 3 столбца следует "сдвинуть" вправо и сжать, чтобы разделить оставшуюся комнату в области просмотра. Я надеюсь это имеет смысл.

Но в настоящее время, когда размер изменяемого столбца изменяется, он просто перекрывает остальные элементы, поэтому невозможно щелкнуть по ним.

Я попытался сделать это с помощью чистого CSS, и таблица стилей стала очень длинной. Я начал использовать позу и стилизованные компоненты, потому что было немного проще получить желаемый эффект.

Я пробовал z-index и flex-grow/shrink (возможно, сделал это неправильно, но я пытался)

Вот мой код React JS:

import React from "react";
import { render } from "react-dom";
import posed, { PoseGroup } from "react-pose";
import styled from "styled-components";
import { tween } from "popmotion";
import image from '../resources/alt_slide_three.jpg';

const Wrapper = styled.div`
width: 100vw;
height: 100vh;
overflow: hidden;
`;

const Container = posed.div({
    enter: { y: '0%', staggerChildren: 400 },
    exit: { y: '0%', staggerChildren: 500 },
    transition: {
        duration: 1000,
        ease: 'linear'
    }
})

const StyledContainer = styled(Container)`
  width: 25%;
  display: inline-flex;
  height: auto;
  align-items: center;
  background: black;
  justify-content: center;
  transform-origin: top;
`;


const Square = posed.div({
    exit: {
        scaleY: 0,
        opacity: 1,
        transition: props => tween({ ...props, duration: 2000 })
    },
    enter: {
        scaleY: 1,
        opacity: 1,
        transition: props => tween({ ...props, duration: 1000 })
    },
    pressable: true,
    init: { scale: 1 },
    pressEnd: { width: '75%' }

});

const StyledSquare = styled(Square)`
  display: inline-flex;
  width: 25%;
  flex: 1 1 25%;
  height: 100vh;
  transform-origin: top;
`;

// const AboutSquare = styled(Square)`
//   display: inline-flex;
//   width: 25%;
//   flex: 1 1 100px;
//   height: 100vh;
//   transform-origin: top;
// `;

const ApproachSquare = styled(Square)`
  display: inline-flex;
  width: 25%;

  flex: 1 1 auto;
  height: 100vh;
  background: white;
  transform-origin: top;
`;

const TeamSquare = styled(Square)`
  display: inline-flex;
  width: 25%;
  flex: 1 1 auto;
  height: 100vh;
  background: white;
  transform-origin: top;
`;

const ContactSquare = styled(Square)`
  display: inline-flex;
  width: 25%;
  flex: 1 1 auto;
  height: 100vh;
  background: white;
  transform-origin: top;
`;

const Column = styled.div`
    display: flex;
    width: 25%;
    height: 100vh;
    align-items: flex-end;
    justify-content: center;
    flex: 1 1 auto;
    opacity: 1;
    background-color: transparent;
    transition: opacity .6s ease-out;
    transition: opacity .6s ease-in;
    -moz-transition: opacity .6s ease-in-out;
    -webkit-transition: opacity .6s ease-in-out;
    -o-transition: opacity .6s ease-in-out;
    `;

const Line = posed.div({
    exit: {
        scaleY: 0,
        opacity: 1,
        transition: props => tween({ ...props, duration: 500, ease: 'in-out' })
    },
    enter: {
        scaleY: 1,
        opacity: 1,
        transition: props => tween({ ...props, duration: 500 })
    }
});

const Border = styled(Line)`
    display: flex;
    position: relative;
    width: 1px;
    height: 100vh;
    background: black;
    transform-origin: top;
  `;

const P = posed.p({
    exit: {
        opacity: 0,
        delay: 1000,
        transition: { duration: 500 }
    },
    enter: {
        opacity: 1,
        delay: 3000,
        transition: { duration: 500 }
    }
});

const Title = posed.span({
    exit: {
        opacity: 0,
        delay: 1000,
        transition: { duration: 500 }
    },
    enter: {
        opacity: 1,
        delay: 2000,
        transition: { duration: 500 }
    }
});


class Home extends React.Component {
    state = {
        clicked: false,
        isVisible: false,
        grow: false,

    };

    componentDidMount() {
        this.setState({
            isVisible: !this.state.isVisible
        });
    }

    onRest = () => {
        this.setState({
            isVisible: !this.state.isVisible
        });
    }


    render() {
        const { isVisible } = this.state;

        return (
            <Wrapper>
                <PoseGroup onRest exitPose='exit'>
                    {isVisible &&
                        <Container key="container">
                            <StyledSquare><Column><P>ABOUT2</P></Column><Border /></StyledSquare>
                            <ApproachSquare key="Square2"><Column><P>APPROACH</P></Column><Border /></ApproachSquare>
                            <TeamSquare key="Square3"><Column><P>TEAM</P></Column><Border /></TeamSquare>
                            <ContactSquare key="Square4"><Column><P>CONTACT</P></Column></ContactSquare>
                            <Title key="Forae" id="title">FORAE FACTORY</Title>
                        </Container>
                    }
                </PoseGroup>
            </Wrapper>
        );
    }
}

export default Home

Вот CSS (если необходимо дублировать):

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#title {
  pointer-events: none;
  font-size: 125px;
  font-weight: bold;
  font-family: 'Montserrat';
  position: absolute;
  bottom: 50%;
  left: 15%;
}

.fullscreen {
  z-index: 1;

  /* background-image: url("./resources/alt_slide_one.jpg"); */
  background-color: rgb(49, 49, 49);
  background-size: cover;
  width: 100%; 
  height: 100%; 
  position: fixed; 
  top: 0; 
  flex-basis: auto;
  left: 0; 
  opacity: 1;
  transition: width .6s ease-in;
}

Я не получаю никаких ошибок, я просто хочу, чтобы столбцы были видимыми и увеличивались / уменьшались относительно столбца, по которому щелкнули