Array not resetting after changing query text - reactjs

Question

React beginner here. I'm learning how to make a simple scrolling website. What happens is that when I type for example "hello" the first results will show up correctly, however if I type something else, the results will be added at the end of the array, and if I want to see them, I will have to scroll down. I want it to show the results as I am typing all while "resetting" the array every time.
Here's the code:
import React, { Component } from 'react';
import axios from 'axios';
import styled from 'styled-components';
const SearchStickerContainer = styled.div`
width: 100%;
height: 70vh;
overflow: scroll;
position: absolute;
top: 20%;
`;
const SearchLabel = styled.label`
font-size: 25px;
font-weight: bold;
`;
function SearchStickers() {
const [photos, setPhotos] = React.useState([]);
const [page, setPage] = React.useState(1);
const [bottom, setBottom] = React.useState(false);
const [query, setQuery] = React.useState(null);
const [search, setSearch] = React.useState('');
React.useEffect(() => {
querySearch(null, page);
}, [])
const querySearch = async (queryString, page) => {
let config = {
headers: {
apiKey: '823bb74a52fb44f8590c87b3dfd8c4e8'
}
}
if (bottom === true) {
setPage(page + 1);
}
if (queryString !== null) {
await axios
.get(`/v1/search?userId=9937&q=${queryString}&lang=en&pageNumber=${page}&limit=20`, config)
.then(res => {
if (res.data.body.stickerList !== null) {
setPhotos([...photos, ...res.data.body.stickerList]);
}
});
}
}
const searchBar = () => {
return (
<form>
<SearchLabel>
<span>search</span>
</SearchLabel>
<input
type="text"
id="search"
placeholder="search stickers"
onChange={(e) => [setQuery(e.target.value), querySearch(e.target.value)]}
value={query}
/>
</form>
)
}
const handleScroll = (e) => {
const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
setBottom(true);
if (bottom) {
querySearch(query, page);
setBottom(false);
}
}
return (
<SearchStickerContainer onScroll={handleScroll}>
{searchBar()}
<div>
<div style={{ minHeight: "100px" }}>
{photos && photos.map(user => (
<img src={user.stickerImg} height="200px" width="200px" />
))}
</div>
{bottom === true ? <div> Loading ... </div> : null}
</div>
</SearchStickerContainer>
);
}
export default SearchStickers;
I suspect the issue comes from:
setPhotos([...photos, ...res.data.body.packageList]);
No matter how else I change it, the issue will remain the same (or get different issues, like the scrolling disappearing).

Answer 1

If you are not wanting to always append search results to the existing state, then instead of
setPhotos([...photos, ...res.data.body.stickerList]);
just fully replace the photos state
setPhotos(res.data.body.stickerList);