Странное поведения реакта при overflow hidden

Люди добрые помогите, уже уйму времени потратил на решение этой проблемы, но не могу понять почему происходит такое поведение. Эта плашка и если на нее навести то она плавно раскрывается.

 &__item {
    height: 470px;
    &-layout {
      background: #fff;
      box-shadow: 5px 15px 15px rgba(0, 0, 0, 0.15);
      padding: 37px 39px 36px;
      max-height: 327px;
      overflow: hidden;
      color: $main-color;
      @include transition(max-height .6s);
      border-radius: 15px;
      &:hover {
        max-height: 470px;
      }
    }
 }
 &__button {
    margin-top: 87px;
    background: linear-gradient(133.47deg, #5051C8 -22.37%, #A80DCD 91.58%), #6D33B3;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: #fff;
    padding: 10px 44px;
    &:hover {
      background: #a80ccd;
    }
  }

Проблема заключается в том что при открытие модального окна и после его закрытия контент внутри едет на верх, при этом если смотреть через консоль, то никаких для этого действия стилей не накладывается. Если снова навести на плашку, то она так же раскрывается и контент внутри встает на свое место и поведение восстанавливается, но открывая снова модалку, происходит то же самое. Если в стилях убрать overflow:hidden, то все будет нормально. Использую модал бутстрап, думал сначала что такое поведение из за него, писал модалку руками, но эффект тот же.

Компонент модалки

import React, {Component} from 'react'
import Modal from 'react-bootstrap/Modal'
class Callback extends Component {
  render() {
    return (
      <Modal
        show={this.props.show}
        onHide={this.props.onHide}
      >
        <Modal.Body>
          //Форма
        </Modal.Body>
      </Modal>
    )
  }
}
export default Callback

Компонент плашки

import React from 'react'
import ButtonCallback from "../../UI/ButtonCallback";
const ServiceItem = () => {
const items = [
    {title: 'Titile', coast: 'coast', description:'Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem'}
];
return (
  <div className="row">
   {items.map((item,index) => {
     return (
      <div className="col-md-3 col-xs-6 services__col" key={index}>
       <div className="services__item">
        <div className="services__item-layout">
          <div className="services__head">
            <h3 className="services__title-head">{item.title}</h3>
            <span className="services__coast">{item.coast}</span>
          </div>
          <p className="services__text">
          {item.description}
          </p>
          <ButtonCallback className="button services__button"/>
         </div>
        </div>
       </div>
      )
    })}
  </div>
)
};
export default ServiceItem

Компонент кнопки

import React, {Component} from 'react'
import Callback from './CallBack'
class ButtonCallback extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
    this.openModal = this.openModal.bind(this);
    this.hideModal = this.hideModal.bind(this)
  }
  openModal = () => {
    this.setState({
      isOpen: true
    });
    document.getElementById('page').style.filter = 'blur(3px)'
  };
  hideModal = () => {
    this.setState({
      isOpen: false
    });
    document.getElementById('page').style.filter = 'none'
  };
  render() {
    return (
      <React.Fragment>
        <button type="button"
                className={this.props.className}
                onClick={this.openModal}
        >
          Оставить заявку
        </button>
        <Callback
          show={this.state.isOpen}
          onHide={this.hideModal}
        />
      </React.Fragment>
    )
  }
}
export default ButtonCallback