User login activity is not tracked in the form, which is in another file

How to make that the status of user login was saved on the main page, as the form is separate, in a separate file and a separate script, I tried to connect scripts on all files, but nothing worked, although the function Google Firebase OnAuthStateChanged should track this, what can be wrong?
Main page is index.html,reg_form.html, markup for form! Project build using Vite
I will leave the snippet and the link to the live GitHub page below.
When,after submit and successful login redirect to homepage,nothing happened
Its only worked when i paste form HTML markup in one file with header
Logic is here: When user is logged in – in header sign up button is hidden and user dropdown with email and logout button,when user is logged out,sign up button is in header,function which responsible for that is updateUI

const elements = {
  registrationForm: document.getElementById('registration_form'),
  loginForm: document.getElementById('login_form'),
  registrationName: document.getElementById('registration_name'),
  registrationEmail: document.getElementById('registration_email'),
  registrationPassword: document.getElementById('registration_password'),
  closeModalButton: document.getElementById('closeModalButton'),
  showRegistrationFormButton: document.getElementById(
    'showRegistrationFormButton'
  ),
  showLoginFormButton: document.getElementById('showLoginFormButton'),
  registerButton: document.getElementById('registerButton'),
  loginButton: document.getElementById('loginButton'),
  loginEmail: document.getElementById('login_email'),
  loginPassword: document.getElementById('login_password'),
  userDropdown: document.querySelector('.select-menu'),
  signUpButton: document.querySelector('.header-link-log-up'),
  mobileActiveAcc: document.querySelector('.mobile-active-acc'),
  userInfoContainer: document.getElementById('user_info'),
  userNameElement: document.querySelector('.user-name'),
  googleSignInButton: document.getElementById('googleSignInButton'),
  logoutButton: document.getElementById('logoutButton'),
  usernameDisplay: document.querySelector('.user-name'),
  toggleButtons: document.querySelectorAll('.toggle_buttons button'),
};
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const database = firebase.database();
function redirectToIndex() {
  location.href = 'index.html';
}
function toggleFormVisibility(showForm, hideForm, clickedButton) {
  elements[showForm].style.display = 'flex';
  elements[hideForm].style.display = 'none';
  elements.toggleButtons.forEach(button => {
    button.classList.remove('clicked');
  });

  elements[clickedButton].classList.add('clicked');
}

function showRegistrationForm() {
  toggleFormVisibility(
    'registrationForm',
    'loginForm',
    'showRegistrationFormButton'
  );
}

function showLoginForm() {
  toggleFormVisibility('loginForm', 'registrationForm', 'showLoginFormButton');
}

function saveUserDataToLocalStorage(userData) {
  localStorage.setItem('user_data', JSON.stringify(userData));
}

function getUserDataFromLocalStorage() {
  const userDataString = localStorage.getItem('user_data');
  return userDataString ? JSON.parse(userDataString) : null;
}

function closeModal() {
  elements.registrationForm.style.display = 'none';
  // redirectToIndex();
}

function register() {
  let name = elements.registrationName.value;
  let email = elements.registrationEmail.value;
  let password = elements.registrationPassword.value;

  if (
    !validate_field(name) ||
    !validate_email(email) ||
    !validate_password(password)
  ) {
    alert('Registration failed. Please check your inputs.');
    return;
  }

  auth
    .createUserWithEmailAndPassword(email, password)
    .then(userCredential => {
      let user = userCredential.user;
      let database_ref = database.ref();
      let user_data = {
        name: name,
        email: email,
        last_login: Date.now(),
      };
      database_ref.child('users/' + user.uid).set(user_data);
      saveUserDataToLocalStorage(user_data);
      alert('Registration successful!');
      console.log('Name:', name);
      console.log('Email:', email);
      clearRegistrationForm();
      redirectToIndex();
    })
    .catch(error => {
      alert(`Registration failed: ${error.message}`);
    });
}

function login() {
  let email = elements.loginEmail.value;
  let password = elements.loginPassword.value;

  if (!validate_email(email) || !validate_password(password)) {
    alert('Login failed. Please check your inputs.');
    return;
  }

  auth
    .signInWithEmailAndPassword(email, password)
    .then(userCredential => {
      let user = userCredential.user;
      let database_ref = database.ref();
      let user_data = {
        last_login: Date.now(),
      };
      database_ref.child('users/' + user.uid).update(user_data);
      saveUserDataToLocalStorage(user_data);
      alert('Login successful!');
      console.log('Email:', email);
      displayUserInfo(user);
      clearLoginForm();
      redirectToIndex();
    })
    .catch(error => {
      alert(`Login failed: ${error.message}`);
    });
}

function clearRegistrationForm() {
  elements.registrationName.value = '';
  elements.registrationEmail.value = '';
  elements.registrationPassword.value = '';
}

function clearLoginForm() {
  elements.loginEmail.value = '';
  elements.loginPassword.value = '';
}

function displayUserInfo(user) {
  if (elements.userInfoContainer && elements.userNameElement) {
    elements.userInfoContainer.textContent = `Welcome, ${
      user.displayName || user.email
    }!`;
    elements.userNameElement.textContent = user.displayName || user.email;
  } else {
    console.error(
      "Element with id 'user_info' or class 'user-name' not found."
    );
  }
}

function updateUI(user) {
  if (user) {
    elements.usernameDisplay.textContent = user.displayName || user.email;
    elements.userDropdown.classList.remove('is-hidden');
    elements.signUpButton.style.display = 'none';
    elements.mobileActiveAcc.classList.remove('is-hidden');
  } else {
    // localStorage.clear();
    // window.location.href = "../index.html";
  }
}

firebase.auth().onAuthStateChanged(updateUI);

https://bendelvolodymyr.github.io/Smart-Foxes-Bookshelf/