Problem with react transition group when transit modal

Question

I try to animated my modal by using multiple method, but none seem working properly. For example, i try to add transition in .modalBackground but it's not working.

.modalBackground {
  width: 100vw;
  height: 100vh;
  position: absolute;
  display: flex;
  z-index: 2;
  transition: all 0.4s;
}
.modalBackground:target {
  visibility: visible;
  opacity: 1;
}

After that, I use a lib call react-transition-group to animated the modal but those transition is not working. The modal appear without click the button and none of animation work Here is my code for running transition

import { useState } from "react"
import Modal from "./OTPCode";
import { Transition } from 'react-transition-group';
export default function Table() {
    const defaultStyles = {
        transition: `opacity 300ms ease-in-out`,
        opacity: 0,
    };

    const transitionStyles = {
        entering: { opacity: 1 },
        entered: { opacity: 1 },
        exiting: { opacity: 0 },
        exited: { opacity: 0 },
    };
    const [openModal, setOpenModal] = useState(false);
 const handleUploadOTP = () => {
        setOpenModal(true);
    }
return (<><button className="openModalBtn" onClick={handleUploadOTP}>
                                Upload
                            </button>
                            <Transition in={openModal} timeout={300}>
                                {state => (
                                    <Modal
                                        title="Transition alert"
                                        styles={{
                                            ...defaultStyles,
                                            ...transitionStyles[state]
                                        }}
                                        closeModal={setOpenModal} />
                                )}
                            </Transition> </>);
}

Here is my OTPCode

import React, { useState } from 'react';
import configData from "./../conf.json";
import axios from 'axios';
import './../Ultility/styles.css'

function Modal({ closeModal }) {

    const [otp, setOtp] = useState(new Array(6).fill(""));
    const [selectedFile, setSelectedFile] = useState();
    const [isSuccess, setIsSuccess] = useState();
    const [argentHost, setArgentHost] = useState("");
    const [crontab, setCrontab] = useState("");
    const [times, setTimes] = useState("");
    const Uploaddiv = document.getElementById('Upload');
    const OTPdiv = document.getElementById('OTP');
    const StatusOTP = document.getElementById('StatusOTP');
    const StatusUpload = document.getElementById('StatusUpload');
    const Uploadbtn = document.getElementById('UploadBtn');

    const handleOTPChange = (element, index) => {
        if (isNaN(element.value)) {
            console.log(element.value);
            return false;
        }

        setOtp([...otp.map((d, idx) => (idx === index) ? element.value : d)])

        //Focus next input
        if (element.nextSibling) {
            element.nextSibling.focus();
        }
    }

    const handleBackSpace = (element, index) => {
        if (element.key === 'Backspace' && element.target.value !== '') { element.target.value = '' } else if (element.key === 'Backspace' && index !== 0) {
            setOtp([...otp.map((d, idx) => (idx === index - 1 || idx === index) ? '' : d)])
            element.target.previousSibling.select();
        }

    }

    const sendOTPVerify = (OTPcode) => {
        console.log(OTPcode);
        axios.post(`${configData.SERVER_URL}/otp/verify`, {
            session_id: localStorage.getItem('sessionId'),
            otp_code: OTPcode,
        })
            .then(function (response) {
                if (response.status === 200) {
                    OTPdiv.style.display = "none";
                    Uploaddiv.style.display = "inline";
                }
            })
            .catch(function (error) {
                console.log(error, "error");
                if (error.response.status === 403) {
                    StatusOTP.style.display = 'block';
                }
            });
    }

    const handleFileChange = (event) => {

        if (event.target.files[0].type === 'text/x-sh' || event.target.files[0].type === 'text/x-python') {
            event.target.files[0].status = 'File is ready to upload';
            Uploadbtn.style.display = 'flex'
        } else {
            event.target.files[0].status = 'Please select a Bash or Python file type to upload';
            Uploadbtn.style.display = 'none'
        }
        setSelectedFile(event.target.files[0])

    };
    const handleUploadSend = () => {
        const formData = new FormData();
        if (selectedFile) {
            formData.append("file", selectedFile);
        } else { console.log("there is no such file!") }

        axios.post(`${configData.SERVER_URL}/upload/?agent_host=${argentHost}&crontab=${crontab}&times=${times}&sid=` + localStorage.getItem('sessionId') + ``, formData, {
            headers: {
                "Content-Type": selectedFile.type,
            },
        })
            .then(function (response) {
                if (response.status === 200) {
                    window.location.reload(false);
                } else if (response.status === 403) {
                    setIsSuccess(response.data.detail);
                    console.log(response);
                }
            })
            .catch(function (error) {
                console.log(error, "error");
                if (error.response.status === 403) {
                    StatusUpload.style.display = 'block';
                }
            });
    };
    return (
        <div className="modalBackground modal1">
            <div className="modalContainer CT1">
                <div className='titleCloseBtn'>
                    <button onClick={() => closeModal(false)}> X </button></div>
                <div className='OTP' id='OTP'>
                    <div className="titleModal">
                        <h1>Enter your OTP to Continues Upload</h1>
                    </div>
                    <div className="bodyModal">
                        <div className='row'>
                            {otp.map((data, index) => {
                                return (
                                    <input
                                        className="otp-field"
                                        type="text"
                                        name="otp"
                                        maxLength="1"
                                        key={index}
                                        value={data}
                                        onChange={e => handleOTPChange(e.target, index)}
                                        onKeyDown={e => handleBackSpace(e, index)}
                                        onFocus={e => e.target.select()}></input>
                                )
                            })}
                            <p>OTP code Entered: {otp.join("")}</p>
                        </div>
                    </div>
                    <div className="footerModal OTPBtn">
                        <button onClick={() => setOtp([...otp.map(v => "")])}> Clear</button>
                        <button onClick={() => sendOTPVerify(otp.join(""))}> Continues</button>
                    </div>
                </div>
                <div className="StatusLogin Status2" id="StatusOTP"> <p className="statuslogin">Incorrect OTP entered</p></div>

                <div  >
                    <div className='Upload' id='Upload'>
                        <div className="titleModal">
                            <h1>Please select a file to upload</h1>
                        </div>
                        <div className='bodyModal'>
                            <div className='row'>
                                <div>
                                    <input className='choosename' type="file" style={{ color: "transparent", width: "160px" }} onChange={handleFileChange} />
                                    <label className='userLabel' htmlFor="argenthost" value="Argent Host" />
                                    <input className='userInput' type="argenthost" placeholder="Argent Host" id="argenthost" onChange={(e) => setCrontab(e.target.value)} />

                                    <label className='userLabel' htmlFor="crontab" value="Crontab" />
                                    <input className='userInput' type="crontab" placeholder="Crontab" id="crontab" onChange={(e) => setArgentHost(e.target.value)} />

                                    <label className='userLabel' htmlFor="times" value='Times' />
                                    <input className='userInput' type="times" placeholder="Times" id="times" onChange={(e) => setTimes(e.target.value)} />
                                </div>
                                {selectedFile ? (
                                    <div>
                                        <p>Filename: {selectedFile.name}</p>
                                        <p>Status: {selectedFile.status}</p>
                                    </div>
                                ) : (
                                    <p>Select a python or bash file to continues</p>
                                )}
                            </div>
                        </div>
                    </div>
                    <div className="footerModal UploadBtn" id='UploadBtn'>
                        <button onClick={handleUploadSend}>Upload</button>
                    </div>
                    {isSuccess ? (
                        <div>
                            <p>{isSuccess}</p>
                        </div>
                    ) : (<></>)}
                </div>
                <div className="StatusLogin Status2" id="StatusUpload"> <p className="statuslogin">File with the same name already existed</p></div>
            </div>
        </div>
    )
}

export default Modal

And here is my css for OTPCode Modal

`.openModalBtn {
  width: 100px;
  height: 40px;
  border-color: transparent;
  margin-right: 10px;
  border-radius: 6px;
  background-color: rgb(9, 37, 116);
  color: rgb(253, 250, 57);
  font-weight: 600;
  font-size: 20;
  text-decoration: none;
  font-family: sans-serif;
  transition: 0.15s ease;

  &+* {
    margin-left: 1.5rem;
  }

  cursor: pointer;
}
.openModalBtn:hover {
  background-color: rgb(253, 250, 57);
  color:rgb(9, 37, 116);
  transition: 0.4s ease;
}
.modalBackground {
  width: 100vw;
  height: 100vh;
  position: absolute;
  display: flex;
  z-index: 2;
}

.modal1 {
  left: 24%;
  top: 250%;
}

.modal2 {
  left: 22%;
  top: 22%;
}


.modalContainer {
  border-radius: 12px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  display: flex;
  flex-direction: column;
  padding: 25px;
}



.CT1 {
  width: 500px;
  height: 600px;
}

.CT2 {
  width: 500px;
  height: 500px;
}

.modalContainer .titleModal {
  display: inline;
  text-align: center;
  margin-top: 10px;
  font-family: sans-serif;
}



.titleCloseBtn {
  display: flex;
  justify-content: flex-end;
}

.titleCloseBtn button {
  background-color: transparent;
  border: none;
  font-size: 25px;
  cursor: pointer;
}

.modalContainer .bodyModal {
  flex: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: sans-serif;
}

.modalContainer .footerModal {
  flex: 20%;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}

.OTPBtn {
  display: flex;
}

.UploadBtn {
  display: none;
}

.modalContainer .footerModal button {
  width: 150px;
  height: 45px;
  margin: 10px;
  border: none;
  background-color: cornflowerblue;
  color: white;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
}
.otp-field {
  width: 38px;
  margin-right: 10px;
  padding-left: 12px;
  height: 40px;
}

.Upload {
  display: none;
  align-items: center;
}

input[type='file'] {
  color: transparent;
}

input::file-selector-button {
  width: 150px;
  height: 45px;
  margin: 5px;
  border: none;
  background-color: cornflowerblue;
  color: white;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
}

I know it's a mess but please anyone help me with this, i'm very appriciated about that.