Grid, Load More 버튼 클릭시 style error

안녕하세요,

강의 잘 보던 중 두가지 질문이 생겼습니다.

#1.

첫번째는 grid gutter 관련인데요,  선생님과 코드를 똑같이 했지만 저는 아래쪽 여백이 적용이 되지 않습니다.  깃허브가서 코드 그대로 카피해서 해당 부분(<Row gutter~ / >, GridCards.js) 적용했는데 안되네요 ..:( 구글링해봐도 모르겠어서 질문드립니다. 

#2.

Load More 버튼 클릭시 아래 첨부한 사진처럼 콘솔에 에러가 뜨는데요, 작동은 하는 상태이지만 에러는 사라지지 않아서 질문드립니다.

해당 부분 찾아보니 mainMovieImage 에 state set을 null값으로 주거나, {mainImage &&} 처럼 해당 데이터 있을 시 실행하도록 설정해주면 해결된다고 하더라고요. 근데 저는 그렇게 설정을 이미 해 놓은 상태인데 계속 오류가 떠서 .. 어떻게 해결해야 할까요?..  (Landing page 코드도 같이 첨부합니다)

// Defaults
import React, { useState, useEffect } from "react";
import { API_URL, IMAGE_BASE_URL } from "../../Config";
import { API_KEY } from "../../ConfigKey";
import { Row } from "antd";
// Components
import MainImage from "./Section/MainImage";
import GridCards from "../../common/GridCards";

function LandingPage() {
    const [movies, setMovies] = useState([]);
    const [mainMovie, setMainMovie] = 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 = async (endPoint) => {
        //response 데이터 받아옴
        /* fetch(endPoint)
            .then((res) => res.json())
            .then((res) => {
                console.log(res);
                setMovies(res.results);
            }); */
        const json = await (await fetch(endPoint)).json();
        setMovies([...movies, ...json.results]);
        setMainMovie(json.results[0]);
        setCurrentPage(json.page);
    };

    const loadItems = () => {
        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 */}
            {mainMovie && (
                <MainImage
                    image={`${IMAGE_BASE_URL}w1280${mainMovie.backdrop_path}`}
                    title={mainMovie.original_title}
                    text={mainMovie.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={loadItems}>Load More</button>
                {/* 계속 style오류가 나는데 해결방법을 모르겠음.. */}
            </div>
        </div>
    );
}

export default LandingPage;

+ 좋은 강의 감사합니다! :)