Uncaught TypeError: Cannot set property 'innerHTML' of null - web application assistance

Question

So I am trying to create a web application but I am getting this error. I can get it to work perfectly when following a tutorial online but when I change it around to fit my application, I get this error. I am not too sure I understand what is causing the error.

enter image description here

index.js:52 Uncaught TypeError: Cannot set property 'innerHTML' of null
    at setupAppointments (index.js:52)
    at Object.next (auth.js:21)
    at Object.next (prebuilt.js:17697)
    at next (prebuilt.js:17004)
    at prebuilt.js:13835



and the code for the application where the error is being pulled from.

    




        // DOM elements
const appList = document.querySelector('.appointments');
const loggedOutLinks = document.querySelectorAll('.logged-out');
const loggedInLinks = document.querySelectorAll('.logged-in');
const accountDetails = document.querySelector('.account-details');
const adminItems = document.querySelectorAll('.admin');

const setupUI = (user) => {
  if (user) {
    if (user.admin) {
      adminItems.forEach(item => item.style.display = 'block');
    }
    // account info
    db.collection('users').doc(user.uid).get().then(doc => {
      const html = `
        <div>Logged in as ${user.email}</div>
        <div>${doc.data().bio}</div>
        <div class="pink-text">${user.admin ? 'Admin' : ''}</div>
      `;
      accountDetails.innerHTML = html;
    });
    // toggle user UI elements
    loggedInLinks.forEach(item => item.style.display = 'block');
    loggedOutLinks.forEach(item => item.style.display = 'none');
  } else {
    // clear account info
    accountDetails.innerHTML = '';
    // toggle user elements
    adminItems.forEach(item => item.style.display = 'none');
    loggedInLinks.forEach(item => item.style.display = 'none');
    loggedOutLinks.forEach(item => item.style.display = 'block');
  }
};
// setup appointments
const setupAppointments = (data) => {
  if (data.length) {
    let html = '';
    data.forEach(doc => {
      const appointment = doc.data();
      const li = `
        <li>
          <div class="collapsible-header grey lighten-4"> ${appointment.fname} </div>
          <div class="collapsible-body white"> ${appointment.lname} </div>
          <div class="collapsible-body white"> ${appointment.fname} </div>
          <div class="collapsible-body white"> ${appointment.cust_num} </div>
          <div class="collapsible-body white"> ${appointment.cust_email} </div>
          <div class="collapsible-body white"> ${appointment.app_time} </div>
        </li>
      `;
      html += li;
    });
    appList.innerHTML = html
  } else {
    appList.innerHTML = '<h5 class="center-align">Login to view appointments</h5>';
  }
  

};

// setup materialize components
document.addEventListener('DOMContentLoaded', function() {

  var modals = document.querySelectorAll('.modal');
  M.Modal.init(modals);

  var items = document.querySelectorAll('.collapsible');
  M.Collapsible.init(items);

});
    
    
    and from here as well
    


    // add admin cloud function
const adminForm = document.querySelector('.admin-actions');
adminForm.addEventListener('submit', (e) => {
  e.preventDefault();

  const adminEmail = document.querySelector('#admin-email').value;
  const addAdminRole = functions.httpsCallable('addAdminRole');
  addAdminRole({ email: adminEmail }).then(result => {
    console.log(result);
  });
});

// listen for auth status changes
auth.onAuthStateChanged(user => {
  if (user) {
    user.getIdTokenResult().then(idTokenResult => {
      user.admin = idTokenResult.claims.admin;
      setupUI(user);
    });
    db.collection('appointments').onSnapshot(snapshot => {
      setupAppointments(snapshot.docs);
      setupUI(user);
    }, err => console.log(err.message));
  } else {
    setupUI();
    setupAppointments([]);
  }
});

// create new appointment
const createApp = document.querySelector('#create-app');
createApp.addEventListener('submit', (e) => {
  e.preventDefault();
  db.collection('appointments').add({
    fname: createApp.fname.value,
    lname: createApp.lname.value,
    cust_num: createApp.cust_num.value,
    cust_email: createApp.cust_email.value,
    app_time: createApp.app_time.value
  }).then(() => {
    // close the create modal & reset form
    const modal = document.querySelector('#modal-create');
    M.Modal.getInstance(modal).close();
    createApp.reset();
  }).catch(err => {
    console.log(err.message);
  });
});

// signup
const signupForm = document.querySelector('#signup-form');
signupForm.addEventListener('submit', (e) => {
  e.preventDefault();
  
  // get user info
  const email = signupForm['signup-email'].value;
  const password = signupForm['signup-password'].value;

  // sign up the user & add firestore data
  auth.createUserWithEmailAndPassword(email, password).then(cred => {
    return db.collection('users').doc(cred.user.uid).set({
      bio: signupForm['signup-bio'].value
    });
  }).then(() => {
    // close the signup modal & reset form
    const modal = document.querySelector('#modal-signup');
    M.Modal.getInstance(modal).close();
    signupForm.reset();
    signupForm.querySelector('.error').innerHTML = ''
  }).catch(err => {
    signupForm.querySelector('.error').innerHTML = err.message;
  });
});

// logout
const logout = document.querySelector('#logout');
logout.addEventListener('click', (e) => {
  e.preventDefault();
  auth.signOut();
});

// login
const loginForm = document.querySelector('#login-form');
loginForm.addEventListener('submit', (e) => {
  e.preventDefault();
  
  // get user info
  const email = loginForm['login-email'].value;
  const password = loginForm['login-password'].value;

  // log the user in
  auth.signInWithEmailAndPassword(email, password).then((cred) => {
    // close the signup modal & reset form
    const modal = document.querySelector('#modal-login');
    M.Modal.getInstance(modal).close();
    loginForm.reset();
    loginForm.querySelector('.error').innerHTML = '';
  }).catch(err => {
    loginForm.querySelector('.error').innerHTML = err.message;
  });

});

This is the full length of code for where I am trying to pull the data