Modal fade-in animation ends with jump to top layer

Question

My keyframe animation for a modal which is supposed to fade in when opened is at the top level of the z-index, after adding the animation it fades in, but appears stacked behind a couple other components which are explicitly stacked at lower indices and just when it ends the modal "jumps" to the front into its proper index.

.modal {
  opacity: 0;
  animation: fadeIn 1s ease forwards; 
  
  .modalContent {
    background-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(8px);
    padding: 20px;
    border-radius: 30px;
    max-width: 400px;
    width: 100%;
    color: white;
    text-align: center;
    z-index: 1010;

    h2 {
      margin: 0.5em;
    }

    .modalContent button {
      margin-top: 10px;
      padding: 8px 16px;
      cursor: pointer;
    }
  }

}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

import styles from "./modal.module.scss"
import Contact from "../contact/contact"
import React from "react"

function Modal ({ isOpen, onClose }) {

    if(!isOpen) {
        return null
    }

    const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
        if(e.target === e.currentTarget) {
            onClose()
        }
    }

    return (
        <div className={styles.modal}>
            <div className={styles.modalOverlay} onClick={handleOverlayClick}>
                <div className={styles.modalContent}>
                    <h2>Say hi and leave me a message!</h2>
                    <Contact/>
                    <button onClick={onClose}>X</button>
                </div>
            </div>
        </div>
    )
}

export default Modal

I thought the fade-in animation may be affected by the blur and removed it or separating it into another div, but it seems to be the issue of the entire animation, because without the animation the modal just pops into visibility in the correct z-index without issue.

I am hoping to resolve this and keeping the fade-in effect, as this project was meant to improve my design skills and I apply various other transitions to components for practise