react-cookie-consent | customizable cookie consent bar for use in React | Frontend Framework library

I have a React app created with CRA, it compiles and runs fine. But production build made with yarn buld and served with serve -s build shows following error in console:

I am trying to use Vanilla Tilt in my React app with the following example: https://codesandbox.io/s/vanilla-tilt-with-react-n5ptm

My code looks like this:

I want to use google analytics in my website, but be gdpr compliant, so only fire it, when the user consents.

I am using gatsby and followed this tutorial: https://www.improvebadcode.com/gatsby-gdpr-cookie-consent/, which makes total sense in my unterstanding.

So I'am using gatsby-plugin-gdpr-cookies and react-cookie-consent.

My gatsby-config looks like this:

So I am working on a website that is using react. I have been testing it in different browsers, and right now the only browser not working is the terrible Internet Explorer. When the page loads on internet explorer it is just a blank/white screen. I have tried multiple suggestions like integrating browserlist, @babel/preset-env with no luck. I completely upgraded from babel 6 to babel 7 to see if that was the issue and nothing changed.

Here are my Dependencies and Dev Dependencies:

I've got an issue with react-testing-library with my React project on TypeScript.

I've been searching on many websites an answer, checking tutorials but I'm really stuck and can't find the answer, changing some configurations on babel.config.js, tsconfig.json and jest.config.js, installing new packages (not sure if I had to install @types for testing-library for example) but I'm not expert with all of this and I'm lost.

I've tried an easy test and it says :

On my Gatsby site I want a Youtube component that only shows up if the user has accepted cookies, because of GDPR. If they have declined cookies I want it to give guidance for resetting their preferences, and if cookie acceptance state is unknown (say they're using an extension that has blocked the cookie notice) I want it to say that it doesn't know whether cookies are allowed or not and if you don't see the banner then please check your adblocker.

I have already set up global state via react-redux that checks for the 'acceptCookies' cookie and all the logic for displaying the banner etc (it's all done using react-cookie-consent) and sets state.acceptCookies to true. This has worked on various pages where for example I only want a contact form to show up if cookies are accepted.

This is my component (which I include in any page which is to have a Youtube video, passing it the Youtube code as a prop) :

I am using React/Nextjs for my website and the react-cookie-consent library. It creates a pop up where the user can agree to the cookie policy. If agreed, a cookie is set: CookieConsent with value "true".

Additionally, I want to use Google Analytics to track users if they agree (click Accept on the popup).

But it doesnt work: The Google Analytic cookies _ga and G_ENABLED_IDPS are set before the user clicks on the pop up.

Funny thing is, I only realized that on the Microsoft Edge Browser. In Chrome, these cookies are not set before the user gives consent.

This is my current code in _document.js: