Append slides dynamically in Swiper slider in React

Question

I am creating a new application in React. I want to use the swiper slider for the banners. The banners will be fetched from APIs. How do I append slides to the swiper once it reaches the last slide. I am using onReachEnd function to trigger the api call. Not sure how to append slides dynamically.

export const HeroSlider = () => {
    const [pageNumber, setCurrentPageNumber ] = useState(0)
    const { homeBannerData, isLoading, error } = useBannerData(pageNumber)
    
    var dataHomeBanner = []
    if (homeBannerData && homeBannerData.result) {
        dataHomeBanner = dataHomeBanner.concat(homeBannerData.result.data)        
    }

    function fetchBannerData() {
        setCurrentPageNumber(pageNumber+1)
        if (homeBannerData && homeBannerData.result) {
            dataHomeBanner = dataHomeBanner.concat(homeBannerData.result.data)        
        }
    }

    return (
        /* Hero Banner Start */
        <section className="hero-slider">
            <Swiper
                    slidesPerView={1}
                    watchSlidesVisibility = {true}
                    navigation
                    onReachEnd={() => fetchBannerData()}
                    autoHeight = {true}
                    >
                    {dataHomeBanner && dataHomeBanner.map((slide, index)=>{
                        return (
                            <SwiperSlide key={index}>
                                <img src={slide.image alt={slide.title} className="w-100"/>
                                <Container>
                                    <div className="hero-slider-body d-flex align-items-end align-items-md-center">
                                        <Row>
                                            <Col md={12}>
                                                <div className="hero-slider-caption">
                                                    <h1>{slide.title}</h1>
                                                    <p>{slide.description}</p>
                                                </div>
                                            </Col>
                                        </Row>
                                    </div>
                                </Container>
                            </SwiperSlide>
                            )
                        })}
                </Swiper>
        </section> 
        /* Hero Banner End */  
    )
}

useBannerData is returning the banner data. Right now this code is adding the new slides and replacing the old ones once it fetches data with a new page number. I want it to append at the end of the last slides so that when a user reaches the last slide and clicks on next slide it should fetch data and append it at the end of last slide.

TIA!