Why is my Web-based System not adding Data to Firestore Database?

I created a web-based system using HTML and JavaScript for the system administrator of my project. However, when I tried to connect it to my Firestore Database, it is not being executed and nothing happens. I have followed various source codes and video tutorials and most likely copied and implement them in the same way, but for some reason It won't work for me. I am lost for a couple of hours now. Please help. Thank you!

Here is a snippet of my code:

 <div class="modal fade" id="Registration" 
tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true" style="border-radius: 50px !important;">
        <div class="modal-dialog" role="document" style="max-width: 75% !important; ">
            <div class="modal-content" >
                <div class="modal-header" style="background-color: #EAC818; ">
                    <h5 class="modal-title" id="exampleModalLabel"style="font-weight: bold; color:white; text-align: center; position: absolute;" > <img src="img/regIcon.png">Register New Passenger</h5>
                   <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src="img/close.png"></span>
                    </button>
                </div>
                <div class="modal-body container" style="background-color: #FEDF3F;">
                         <form class="user" method="POST">
                           <div class=" form-group row">
                               <div class=" col-sm-6">

                                    <div class="form-group">
                                        <p class="text-center" style="color:black; font-size: 20px;">Personal Details <i class="fa fa-user-circle" aria-hidden="true"></i></p>
                                        <hr style="position: relative; top:-10px;">
                                    </div>

                                    <div class="form-group">
                                        <input type="text" class="form-control form-control-user" id="fn"
                                            placeholder="First Name" required>
                                    </div>
                                   
                                    <div class="form-group">
                                        <input type="text" class="form-control form-control-user" id="ln"
                                            placeholder="Last Name" required>
                                    </div>

                                    <div class="form-group">
                                        <input type="text" class="form-control form-control-user" id="referralCode"
                                            placeholder="Referral Code" required>
                                    </div>

                                    <div class="form-group">
                                        <p class="text-center" style="color:black; font-size: 20px;">Contact Details <i class="fa fa-envelope" aria-hidden="true" ></i></p>
                                        <hr style="position: relative; top:-10px; ">
                                    </div>


                                    <div class="form-group">
                                        <input type="email" class="form-control form-control-user" id="email"
                                            placeholder="Email Address" required>
                                    </div>

                                    <div class="form-group">
                                        <input type="text" class="form-control form-control-user" id="mobileNumber"
                                            placeholder="Mobile Number" required>
                                    </div>


                               </div>
                               <div class=" col-sm-6">

                                    <div class="form-group">
                                        <p class="text-center" style="color:black; font-size: 20px;">Account Details <i class="fa fa-id-card" aria-hidden="true"></i> </p>
                                        <hr style="position: relative; top:-10px; ">
                                    </div>

                                    <div class="form-group">
                                        <input type="text" class="form-control form-control-user" id="un"
                                            placeholder="Username" required>
                                    </div> 

                                    <div class="form-group">
                                        <input type="password" class="form-control form-control-user" id="pass1"
                                            placeholder="Password" required>
                                    </div> 

                                    <div class="form-group">
                                        <input type="password" class="form-control form-control-user" id="pass2"
                                            placeholder="Retype Password" required>
                                    </div>

                                    <div class="form-group">
                                        <p class="text-center" style="color:black; font-size: 14px;">By continuing you’re indicating that you accept our <a href="#" style="color:black"> <u>Terms of Use</u></a> and our <a href="#" style="color:black"><u>Privacy Policy</u> </a></p>
                                    </div>

                                    <div class="form-group">
                                        <button style="background-color:#F3E8AE; border: none; border-radius: 20px; height: 45px; width: 100%; font-weight:bold;" type="button" data-dismiss="modal">Clear</button>
                                    </div>

                                    <div class="form-group">
                                       
                                         <input type="submit" value="Submit"  id="submitData" name="submitData" style="background-color:#59AD6A; border: none; border-radius: 20px; height: 45px; width: 100%; color: white; font-weight: bold;"  >
                                    </div>
 
                               </div>
                           </div> 
                    
                </div>
              
            </div>
        </div>
    </div>
    <!-- End of Page Wrapper -->

    <!-- Bootstrap core JavaScript-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->
    <script src="js/admin.min.js"></script>

    <!-- Page level plugins -->
    <script src="vendor/datatables/jquery.dataTables.min.js"></script>
    <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>

    <!-- Page level custom scripts -->
    <script src="js/demo/datatables-demo.js"></script>

     <!-- Firebase -->

    


</body>

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-analytics.js";

  import { getFirestore, addDoc, collection  } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-firestore.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIzaSyAYLfR72YvVWK7NKuYv0i8cZLeOyky_2UI",
    authDomain: "e-hatid-ac4b8.firebaseapp.com",
    databaseURL: "https://e-hatid-ac4b8-default-rtdb.firebaseio.com",
    projectId: "e-hatid-ac4b8",
    storageBucket: "e-hatid-ac4b8.appspot.com",
    messagingSenderId: "151893715495",
    appId: "1:151893715495:web:c66ce45a224b36f0113c02",
    measurementId: "G-K4WTYXS330"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);

  // Initialize Cloud Firestore and get a reference to the service
  const db = getFirestore(app);

  submitData.addEventListener('click', (e) => {
        var firstName = document.getElementById('fn').value;  
        var lastName = document.getElementById('ln').value;  
        var referralCode = document.getElementById('referralCode').value;
        var email = document.getElementById('email').value;
        var mobileNumber = document.getElementById('mobileNumber').value;
        var username = document.getElementById('un').value;
        var password = document.getElementById('pass1').value;
        var rePassword = document.getElementById('pass2').value;  

        addDoc(collection(db, "passengers"), {
              email: email,
              first name: firstName,
              last name: lastName,
              password: password,
              username: username
            });

        alert('Yehey!');
     });   
</script>  

</html>