Why i can't get Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. error

Question

I have the following code that i use for virtuall scrolling

 <div class="card-container">
        <div class="card show">First card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">Last card</div>
    </div>

JS

const cards = document.querySelectorAll('.card');
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        entry.target.classList.toggle('show', entry.isIntersecting);
    })
})

const lastCardObserver = new IntersectionObserver(entries => {
    const lastCard = entries[0];
    console.log(lastCard)
    if(!lastCard.isIntersecting) return;
    loadNewCards();
    lastCardObserver.unobserve(lastCard.target);
    lastCardObserver.observe(document.querySelector('.card:last-child'));
}, {rootMargin: '200px'})

const cardContainer = document.querySelector('.card-container');
function loadNewCards() {
    for(let i = 0;i < 10;i++) {
        const card = document.createElement('div');
        card.textContent = 'new card';
        card.classList.add('card');
        card.classList.add(`card-${i}`);
        observer.observe(card);
        cardContainer.append(card);
    }
}

cards.forEach(card => {
    observer.observe(card);
})

lastCardObserver.observe(document.querySelector('.card:last-child'))

CSS

.card-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: flex-start;
}


.card {
    border: 1px solid black;
    background: white;
    border-radius: .25rem;
    padding: .5rem;
    transform: translateX(100px);
    opacity: 0;
    transition: 150ms;
}

.card.show {
    transform: translateX(0);
    opacity: 1;
}

EVERYTHING WORKS AS EXPECTED BUT WHEN i try to have items that are not child of some parent element like in my case card-container then i get error

So the code that i try is div elements on my body Why i have this error ?

<div class="card show">First card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">card</div>
        <div class="card">Last card</div>