React Cookie Consent banner not popping up

Question

Recently, I published my first website using the Gatsbyjs Framework (and using the GC): Site: https://www.humital.be/

However, since the founders want to use analytics and cookies, I came to the 'React-cookie-consent' package. When first installed, it seemed to work perfectly fine. However, after a week, it suddenly disappeared. When I try to fix it, it still works on Build in Gatsbyjs. You can find my [latest build here][1] In my package.json I can see the following:

"

dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "ansi-html": "^0.0.9",
    "gatsby": "^4.18.0",
    "gatsby-plugin-csp": "^1.1.3",
    "gatsby-plugin-gatsby-cloud": "^4.18.0",
    "gatsby-plugin-google-gtag": "^4.18.0",
    "gatsby-plugin-image": "^2.18.0",
    "gatsby-plugin-manifest": "^4.18.0",
    "gatsby-plugin-offline": "^5.18.0",
    "gatsby-plugin-react-helmet": "^5.18.0",
    "gatsby-plugin-robots-txt": "^1.7.1",
    "gatsby-plugin-sharp": "^4.18.0",
    "gatsby-plugin-sitemap": "^5.18.0",
    "gatsby-source-filesystem": "^4.18.0",
    "gatsby-transformer-sharp": "^4.18.0",
    "jpeg-js": "^0.4.4",
    "node-fetch": "^2.6.7",
    "nth-check": "^2.1.1",
    "parse-path": "^5.0.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-cookie-consent": "^7.5.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0"
  },
  "devDependencies": {
    "gh-pages": "^4.0.0",
    "prettier": "^2.7.1"

In my Layout Component I implemented the package:

import * as React from "react"
import NavBar from "../navigation/navbar"
import "../../styles/global.css"
import * as styles from "./layout.module.css"
import Footer from "../footer/footer"
import CookieConsent from "react-cookie-consent"
import { Link } from "gatsby"

const Layout = ({ children }) => {
  return (
    <>
      <div className={styles.flex}>
        <NavBar />
        <main>{children}</main>
      </div>
      <CookieConsent
        buttonStyle={{
          background: "#78c0a8",
          cursor: "pointer",
          color: "white",
        }}
        declineButtonClasses={{
          background: "#f07818",
          cursor: "pointer",
          color: "white",
        }}
        location="bottom"
        buttonText="Accepteer de koekjes"
        enableDeclineButton
        declineButtonText="ik wil geen koekjes"
        cookieName="gatsby-gdpr-google-analytics"
        onAccept={() => {
          alert("je hebt de koekjes geaccepteerd!")
        }}
        onDecline={() => alert("je weigerde de koekjes")}
        overlay={true}
        flipButtons={true}
      >
        Omnom Omnom! Wij gebruiken koekjes om jouw ervaring beter te maken. Wil
        je meer weten welke gegevens we verzamelen? Klik{" "}
        <Link to="/privacy">hier.</Link>
      </CookieConsent>
      <Footer />
    </>
  )
}

export default Layout

I am not sure why the banner is not showing up anymore.

Any help is welcomed :)

Thank you! [1]: https://build-31c09012-9025-4d4b-b3a9-c969d86fc86d.gtsb.io/

Answer 1

When accessing your website the background is grayed out, as if the cookie banner was there, unless this is on purpose. Have you tried giving the banner a z-index of 99 or so?