Issues with CSS transitions on Next.js project - css

Question

I'm working on a project in Next.js (React) for the first time. It's a static site (only frontend).
Somehow I run into lots of problems related to the CSS transitions and I can't catch what am I missing.
When using some ready components, for example Modal from react-bootstrap, the transition seems to be working on Modal show, but not on hide. Transitions from Accordion, from the same module, work fine, but didn't work from other Accordion component I tried before that.
I will put some code here, but I have a filling, that there is some fundamental css/js related topic that I don't understand fully, but my searches didn't bring me the answer yet.
Here is the sample of the component, the related CSS is the default bootstrap-css (for the sake of simplicity):
Nav.tsx
import Link from 'next/link'
import navStyles from '../styles/Nav.module.css'
import homeStyles from "../styles/Home.module.css"
import {useState} from "react";
import Modal from "react-bootstrap/cjs/Modal"
import Button from "react-bootstrap/cjs/Button";
const MyVerticallyCenteredModal = (props) => {
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header>
<Button onClick={props.onHide}>X</Button>
</Modal.Header>
<Modal.Body>
<p style={{color: "white"}}>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Aliquid at consequuntur cum ducimus enim fuga hic laudantium magni
maiores, molestias nesciunt nihil nisi nostrum pariatur perspiciatis rem rerum
suscipit, unde?</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
const Nav = () => {
const [modalShow, setModalShow] = useState(false);
const NavComp = () => {
return (
<>
<div className={navStyles.wrapper}>
<div className={`${homeStyles.home} ${homeStyles.mobile}`}>
<div className={navStyles.footer}>
<button
className={`${navStyles.footerBtn}`}
onClick={() => setModalShow(true)}
style={{borderLeft: "1px rgba(70,70,70,0.5) solid"}}
>
Contact
</button>
<MyVerticallyCenteredModal
show={modalShow}
onHide={() => setModalShow(false)}
/>
</div>
</div>
</div>
</>
)
}
return (
<nav className={navStyles.nav}>
<div className={navStyles.container}>
<div className={navStyles.logo}>
<Link href='/'>
<div>
<p className={navStyles.kaveem}>KAVEEM</p>
</div>
</Link>
</div>
<NavComp/>
</div>
</nav>
);
};
export default Nav;