What causes the following issue below ? Any idea guys ? Thanks. the issue is on clone = thead.cloneNode(true);

Type 'Node' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 227 more.

Also I am having issue with Cannot read properties of null (reading 'getBoundingClientRect')

Actually I am using angular but there is some custom things I need to do that is why I am doing this manual JS things.

#code snippet

let container = document.querySelector('#properties-content-left-container');
         container.addEventListener("scroll", () => {
     let filterChips = document.querySelector('#properties-filter-chips');
     let filterChipsBB = filterChips.getBoundingClientRect();
     let top = filterChipsBB.top + filterChipsBB.height;
     let table = document.querySelector('#table') as HTMLElement | null;
     let tableBB = table.getBoundingClientRect();
     let thead = table.querySelector('thead:not(.temporary)') as HTMLElement | null;;
     let gridContainer = document.querySelector('.grid-container');
     let clone = table.querySelector('thead.temporary') as HTMLElement | null;
      table.style.position = 'relative';
     if (tableBB.top < top) {
         if (thead.style.position != 'fixed') {
             thead.style.position = 'fixed';
             thead.style.top = top + 'px';
             thead.style.width = (gridContainer ? gridContainer.clientWidth : table.clientWidth)  + 'px';
             thead.style.maxWidth = (gridContainer ? gridContainer.clientWidth : table.clientWidth)  + 'px';
             thead.style.overflowX = 'auto';
         }

         if (!clone) {
             clone = thead.cloneNode(true);
             clone.classList.add('temporary');
             clone.style.opacity = '0';
             clone.style.top = '0';
             clone.style.position = 'sticky';
             clone.style.width = 'auto';
             clone.style.maxWidth = 'unset';
             table.prepend(clone);
         }