Gatsby ,GraphQl content mapping bug

I am using Gatsby, GraphQl, and contentful. In my project i am trying to connect specific banner section to specific page (like home page should have banner of home and similarly for about us page and other pages) and i am writing my code for banner in banner.jsx . so the approach is every banner respect to the pages have a unique slug id stored in contentful and we want to fetch data of banners from contentful to all the respective pages while avoiding to write different banner codes for each slug id value.
We tried working with custom try catch logic to match slug id’s to respective pages but didn’t get the specific solution.

here is the code for banner.jsx:

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { documentToReactComponents } from "@contentful/rich-text-react-renderer";
import { BLOCKS } from "@contentful/rich-text-types";
import { graphql, useStaticQuery} from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";



const Banner = (props) => {
  const [bannerItems, setBannerItems] = useState([]);
  const [backgroundImage, setBackgroundImage] = useState("");
  const [renderEntry, setRenderEntry] = useState([]);
  const page_id = props;
  const read_slug = page_id.slug;

  const data = useStaticQuery(query);
  const entries = data.allContentfulBannerSection.nodes;

  

  useEffect(() => {
    async function getMenuItems() {
      try {
        setBannerItems(entries);
        //console.log(page_id.slug);
        try {
          await Promise.all(bannerItems.map(async (element) => {
            console.log(element.contentful_id);
  
            if (element.contentful_id === read_slug) {
              const entry = element;
              await setRenderEntry(entry);
              console.log(renderEntry);
            }
          }));
        } catch (error) {
          console.error("Error fetching menu items:", error);
        }
        //bannerItems.map(((entries) => (console.log(JSON.parse(entries.description.raw))));
        // console.log(entries[0]?.description.references[0].url);
        setBackgroundImage(entries[0]?.backgroundImage?.url || "");
      } catch (error) {
        console.error("Error fetching menu items:", error);
      }
    }
    getMenuItems();
  }, [read_slug]);
  
  
  

  const renderCustomRichTextHeading = (node, children) => (
    <div className="custom-rich-text-heading">
      {children.map((child, index) => (
        <h1 key={index}>{child}</h1>
      ))}
    </div>
  );

  const renderCustomRichTextSubheading = (node, children) => (
    <div className="custom-rich-text-subheading">
      {children.map((child, index) => (
        <h2 key={index}>{child}</h2>
      ))}
    </div>
  );

  const headingRenderers = {
    [BLOCKS.HEADING_1]: renderCustomRichTextHeading,
    [BLOCKS.HEADING_2]: renderCustomRichTextSubheading,
  };

  const renderRichText = (richText) => {
    if (richText) {
      return (
        <div className="custom-rich-text-container">
          {documentToReactComponents(richText, {
            renderNode: {
              ...headingRenderers,
              [BLOCKS.EMBEDDED_ASSET]: (node) => {
                const url = entries[0].description.references[0].gatsbyImageData;
                const altText = "Image";
                return (
                  <div className="custom-rich-text-block">
                    {/* {console.log(node)} */}
                    <GatsbyImage image = {url} alt = {altText}/>
                  </div>
                );
              },
            },
          })}
        </div>
      );
    }
    return null;
  };


  return (
    <section
      className="banner"
      style={{ backgroundImage: `url(${backgroundImage})` }}
    >
      <div className="background-overlay"></div>
      <div className="container">
      <div className="d-flex">
          {/* {renderEntry ? (
          <React.Fragment>
            {renderRichText(JSON.parse(renderEntry.description.raw))}
          </React.Fragment>
        ) : (   */}
          {bannerItems.map((entries) => (
            <React.Fragment key={entries.id}>
              {renderRichText(JSON.parse(entries.description.raw))}
            </React.Fragment>
          ))
           
        } 
      </div>

      </div>
    </section>
  );
};

export default Banner;

export const query = graphql`
  query MyQuery ($slug: String){
    allContentfulBannerSection (filter: { slug: {eq: $slug}}){
      nodes {
        id
        title
        slug
        contentful_id
        description {
          raw
          references {
            gatsbyImageData
          }
        }
        backgroundImage {
          url
        }
      }
    }
  }
`

here is the code for home page:

import React from "react";
import Header from '../Components/Header';  
import Banner from "../Components/Banner";
import BasicComponent from "../Components/BasicComponent";
import Philosophy from "../Components/Philosophy";
import PhilosophyProgram from "../Components/PhilosophyProgram";
import Director from "../Components/Director";
import StayConnected from "../Components/StayConnected";
import Footer from "../Components/Footer";

const Home = () => {
  const id = "4hURH4J5WPqHSjm3vABwxo";
  console.log("Slug for Home Page:", id);
  return (
    <>
      <Header/>
      <Banner slug={id} />
      {/* <BasicComponent/> */}
      <Philosophy/>
      <PhilosophyProgram/>
      <Director/>
      <StayConnected/>
      <Footer/>
    </>
  );
};

export default Home;