не работает e.target внутри setTimeout [дубликат]

window.onload = function() { 
    let nextPage = 1;//страница, которую нужно выбрать из бд 
 
    //добавить событие wheel для страницы 
   function onPage() { 
        let pages = document.querySelectorAll('.page'); 
        for(let i=0;i<pages.length;i++){ 
            pages[i].addEventListener("wheel", wheel); 
        } 
   } 
   onPage(); 
 
   //перелистывание страниц 
    function wheel(e) { 
        let px = e.deltaY ; //на сколько была прокручена страница 
        let self = e; 
        if(px >= 100){ 
            let thet = e; 
            e.target.style = 'animation: nextPage 2s 1 ease-in-out';//добавить к текущему элементу анимацию 
            setTimeout( () => { 
                that.target.style= 'display: none'; 
                that.target.style.removeProperty( 'animation'); 
            }, 2000); 
            getBooks(); 
        } 
        if(px <= -100){ 
            e.target.previousSibling.style = 'animation: nextPage 2s 1 ease-in-out reverse;';//добавить анимацию наоборот 
            setTimeout(() => { 
                e.target.previousSibling.style = 'display:block'; 
                e.target.style.removeProperty( 'animation'); 
            },2000); 
        } 
    } 
 
 
    //получить запись из юд 
    function getBooks() { 
        let post = { 
            'nextPage': nextPage //передать следующую страницу 
        }; 
     
        let body = new FormData; 
        for(let variable in post) body.append(variable, post[variable]); 
 
        fetch(`${window.location.origin}/getTenBooks.php`, { 
            method: 'post', 
            mode: 'cors', 
            body: body 
        }).then(response => { 
            return response.json(); 
        }).then(result => { 
            console.log(result); 
            try{ addBook(result); } 
            catch { console.log('error'); } 
            nextPage++;//след. страница на 1 больше 
            onPage(); 
        });	 
    } 
    getBooks(); 
 
 
    function addBook(books){ 
        console.log( books.idBook);  
        document.querySelector('#pageBg').innerHTML += '<div id="book'+books.idBook+'" class="page">'+ books.idBook+'</div>'; 
        onPage(); 
    }    
     
}

root{ 
    position: absolute; 
    width: 1000px; 
    height: 1000px; 
} 
main{  
    width: 90%; 
    height: 75%; 
    margin: 0 5%; 
    padding: 11px; 
    position: absolute; 
    /* display: block; */ 
    background-image: url(https://3djungle.ru/upload/resize_cache/iblock/b54/400_400_1/b54b61a4569eacef50523b7a17f496cd.jpg); 
    border-radius: 10px 10px 10px 10px; 
    display: flex; 
    justify-content: center; 
    /* cursor: none; */ 
} 
#books{ 
    position: absolute; 
    width: 75%; 
} 
 
.content{ 
    position: relative; 
    width: 99%; 
    height: 99%; 
    transform: translate(-50%, -50%);      
    left: 50%; 
    top: 50%; 
    box-shadow: inset 1px 1px 10px black; 
    background-image: url(https://3djungle.ru/upload/resize_cache/iblock/618/400_400_1/618fcf9bb7963b741e1f5b862c6de26d.jpg); 
    border-radius: 10px 10px 10px 10px; 
    border: 10px solid black; 
    background-attachment: local; 
    border-image: url(https://3djungle.ru/upload/resize_cache/iblock/b54/400_400_1/b54b61a4569eacef50523b7a17f496cd.jpg) 10 round round; 
} 
 
.borderMain{ 
    background-image: url(https://3djungle.ru/upload/resize_cache/iblock/b54/400_400_1/b54b61a4569eacef50523b7a17f496cd.jpg); 
    height: 98%; 
    width: 99%; 
    padding: 10px; 
    border: 1px dashed #fffad1; 
    border-radius: 10px 10px 10px 10px; 
    box-shadow:  0px 0px 1px black; 
} 
 
#pageBg{ 
    background: #f4ebdc; 
    position: absolute; 
    width: 99%; 
    height: 100%; 
    box-shadow: 0px -0.5px 1px 0.3px gray, 0px -1px 1px 0.6px #f4ebdc, 0px -1.5px 1px 0.9px gray,0px -2px 1px 1.2px #f4ebdc,0px -2px 1px 1.5px gray, 0px -2.5px 1px 1.8px #f4ebdc, 0px -3px 1px 2.1px gray,0px -4px 1px 2.5px #f4ebdc, 0px -5px 1px 2.9px gray, 0px -6px 1px 3.4px #f4ebdc, 0px -5px 7px 10px black; 
    margin: 0.5%; 
    perspective: 5000px; 
} 
#loading{ 
    position: absolute; 
    color: black; 
} 
.page{ 
    color: red; 
    position: absolute; 
    background: white; 
    width: 100%; 
    height: 100%; 
    transform-origin: bottom; 
    animation-timing-function: ease-out; 
} 
#one{ 
    z-index: 9; 
    /* position: absolute; */ 
}#two{ 
    z-index: 8; 
}#three{ 
    z-index: 7; 
}#four{ 
    z-index: 6; 
}#five{ 
    z-index: 5; 
} 
 
@keyframes nextPage{ 
    0%{transform: rotateX(0deg);} 
    /* 99%{} */ 
    100%{transform: rotateX(-270deg);z-index: 6;} 
}

<div id="root"> 
<main id="books"> 
    <div class="borderMain"> 
        <div class="content"> 
            <div id="pageBg"> 
                <div id="one" class="page">1</div> 
                <div id="two" class="page">2</div> 
                <div id="three" class="page">3</div> 
                <div id="four" class="page">4</div> 
                <div id="five" class="page">5</div> 
            </div> 
        </div> 
    </div> 
</main> 
</div>