javascript - リロードしないと次の js コンポーネントが表示されない

Question

基本的に、親コンポーネントでレンダリングしたいネストされたコンポーネントがあり、サーバーの起動時に正常に動作しています。

しかし、別のページから戻ると問題が発生します。ネストされたコンポーネントの一部が消えます。リフレッシュすると、すべて問題ありません。

この問題を解決するにはどうすればよいですか?

通常: 画像-1

コンポーネントが消えた: 画像-2

Index.js:

import BannerBaseLine from "./../components/HOME/Banner/BannerBaseLine";
import SubSection1 from "./../components/ABOUT/subSection1";
import CoursesList from "../components/HOME/MOSTTRENDING/CoursesList/courseslist";
import ShortOverview from "./../components/HOME/CourseOverviewSection/Section1/shortoverview";
import Testimonial from "./../components/HOME/Testimonial/testimonial";
import ClientItem from "./../components/HOME/Client-area/all-client-item";

export default function HomeMain({categories}) {
  return (
    <>
      <br></br>
      <br></br>
      <br></br>
      <BannerBaseLine categories = {categories} />
      <CoursesList />
      {/* <SubSection1 /> */}
      <ShortOverview />
      <CoursesList />
      <Testimonial />
      <ClientItem />
    </>
  );
}

export async function getStaticProps(){
  const response = await fetch('http://localhost:8000/api/data/categories')
  const data = await response.json()

  console.log(data)
  return {
    props:{
      categories : data, 
    }
  }
}

BannerBaseLine コンポーネント:

import BannerBlock from './BannerBlock';
    export default function BannerBaseLine({ categories }) {
      return (
        <>
          <section
            className="banner-area"
            style={{ backgroundImage: "url(assets/img/banner/0.jpg)" }}
          >
            <div className="container">
              <div className="row">
                <div className="col-lg-6 col-md-8 align-self-center">
                  <div className="banner-inner text-md-start text-center">
                    <h1>
                      Find the Best <span>Courses</span> & Upgrade{" "}
                      <span>Your Skills.</span>
                    </h1>
                    <div className="banner-content">
                      <p>
                        Edufie offers professional training classes and special
                        features to help you improve your skills.
                      </p>
                    </div>
                    <div className="single-input-wrap">
                      <input type="text" placeholder="Search your best courses" />
                      <button>
                        <i className="fa fa-search"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <br></br>
          <br></br>
          <div className="container">
            <div className="intro-area-2">
              <div className="row justify-content-center">
                <div className="col-lg-12">
                  <div className="intro-slider owl-carousel">
                    {categories.map((category) => {
                      return (
                        <>
                          <BannerBlock category={category} key={category.id} />
                        </>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      );
    }

BannerBlock コンポーネント:

    export default function BannerBlock({category}) {
  console.log(category);
  return (
    <div className="item">
      <div className="single-intro-wrap">
        <div className="thumb">
          <img src={category.image} alt="img" />
        </div>
        <div className="wrap-details">
          <h6>
            <a href="#">{category.Base_Category_Title}</a>
          </h6>
          <p>236 Course Available</p>
        </div>
      </div>
    </div>
  );
}