리렌더링 문제에 대해 질문이 있습니다.

import React, { useEffect, useState } from 'react'
import { FaCode } from "react-icons/fa";
import { API_URL, API_KEY, IMAGE_BASE_URL } from '../../Config'
import MainImage from './Sections/MainImage'
import GridCards from '../commons/GridCards'
import { Row } from 'antd'
function LandingPage() {

    const [Movies, setMovies] = useState([])
    const [MainMovieImage, setMainMovieImage] = useState(null)
    const [CurrentPage, setCurrentPage] = useState(0)

    useEffect(() => {
        const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en_US&page=1`
        fetchMovies(endpoint)
    }, [])

    const fetchMovies = (endpoint) => {
        fetch(endpoint)
        .then(response => response.json())
        .then(response => {
            console.log(response)
            setMovies([...Movies, ...response.results])
            setMainMovieImage(MainMovieImage || response.results[0])
            setCurrentPage(response.page)
        })
    }

    const loadMoreItems = () => {
        const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en_US&page=${CurrentPage + 1}`
        fetchMovies(endpoint)
    }

    return (
        <div style={{ width: '100%', margin:'0'}}>

            {/* Main Image */}
            {MainMovieImage && 
                <MainImage 
                image={`${IMAGE_BASE_URL}w1280/${MainMovieImage.backdrop_path}`} 
                title={MainMovieImage.original_title}
                text={MainMovieImage.overview}
                />
            }
            
            <div style={{width: '85%', margin: '1rem auto'}}>
                <h2>Movies by latest</h2>
                <hr />

                {/* Movie Grid Cards */}
                <Row gutter={[16, 16]} >
                    {Movies && Movies.map((movie, index) => (
                        <React.Fragment key={index}>
                            <GridCards 
                                LandingPage
                                image={movie.poster_path ?
                                    `${IMAGE_BASE_URL}w500${movie.poster_path}` : null
                                }
                                movieId={movie.id}
                                movieName={movie.original_title}
                             />
                        </React.Fragment>
                    ))}
                    
                </Row>
                
            </div>

            <div style={{ display:'flex', justifyContent: 'center'}}>
                <button onClick={loadMoreItems}>Load More</button>
            </div>
        
        </div>
    )
}

export default LandingPage

밑의 질문도 보고 

setMainMovieImage(MainMovieImage || response.results[0]) 으로 바꾸고 나서 load more 버튼을 클릭하면 메인 이미지는 변경되지 않는 것을 확인했습니다. 

그런데 여전히 그리드 쪽은 리렌더링되면서 해주신 것처럼 버튼을 누른 자리에서 스크롤이 있고 카드들이 더 생기는 것이 아니라 새로고침처럼 load more 버튼이 있는 제일 밑으로 이동합니다. 

이 문제를 수정하려면 어떻게 할 수 있을까요? 아니면 문제를 수정하기 위해 어떤 게 필요할까요?