Uncaught TypeError in `Navbar.js` line 91

[VerdaKoro]

Hey
I just cloned your very nice template yesterday and started playing with it a little.
The only thing I changed so far, is to replace the hero video with a parallax.
To make this parallax work the way I wanted, I copied some styles for the hero text from gatsby-starter-dimension. This has the odd side effect, that something is messed up with the fonts. To find the source for this, I took out the hero import in index.js and I get a completely white screen.
I was able to trace this down to this error:

Uncaught TypeError: IntersectionObserver.observe: Argument 1 is not an object.
    Navbar Navbar.js:91
    Navbar Navbar.js:86
    React 5
    unstable_runWithPriority scheduler.development.js:468
    React 4
    unstable_runWithPriority scheduler.development.js:468
    React 5
    performReactRefresh react-refresh-runtime.development.js:300
    performReactRefresh react-refresh-runtime.development.js:289
    refreshTimeout RefreshUtils.js:62
    setTimeout handler*enqueueUpdate RefreshUtils.js:60
    <anonymous> Layout.js:208
    js component---src-pages-index-js.95c9d790994d63c7f103.hot-update.js:18
    factory commons.js:4398
    __webpack_require__ commons.js:3760
    _requireSelf commons.js:4109
    apply commons.js:4968
    internalApply commons.js:4337
    internalApply commons.js:4335
    hotApply commons.js:4294
    cb process-update.js:76
    check process-update.js:91
    promise callback*check process-update.js:90
    exports process-update.js:52
    processMessage client.js:279
    handleMessage client.js:139
    handleMessage client.js:102
    init client.js:91
    EventSourceWrapper client.js:80
    getEventSourceWrapper client.js:126
    connect client.js:132
    <anonymous> client.js:33
    node_modules commons.js:186
    factory commons.js:4398
    __webpack_require__ commons.js:3760
    fn commons.js:4069
    initWHMEventSource WHMEventSource.js:14
    <anonymous> ErrorOverlayEntry.js:76
    node_modules commons.js:261
    factory commons.js:4398
    __webpack_require__ commons.js:3760
    <anonymous> commons.js:5109
    O commons.js:3809
    <anonymous> commons.js:5111
    <anonymous> commons.js:5113
Navbar.js:91

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
Carousel@webpack-internal:///./node_modules/react-responsive-carousel/lib/js/components/Carousel.js:78:20
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19669
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19669
TestimonialCarousel@webpack-internal:///./src/components/testimonials/TestimonialCarousel.js:28:68
InnerLoadable@webpack-internal:///./node_modules/@loadable/component/dist/loadable.esm.js:166:34
LoadableWithChunkExtractor
Loadable
main
Fe@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:17228
Theme@webpack-internal:///./src/styles/Theme.js:78:18
Layout@webpack-internal:///./src/components/Layout.js:80:18
IndexPage
PageRenderer@webpack-internal:///./.cache/page-renderer.js:30:29
PageQueryStore@webpack-internal:///./.cache/query-result-store.js:46:30
RouteHandler
div
FocusHandlerImpl@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:20
FocusHandler@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:13
RouterImpl@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:20
Location@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:18
Router
ScrollHandler@webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35
RouteUpdates@webpack-internal:///./.cache/navigation.js:297:32
EnsureResources@webpack-internal:///./.cache/ensure-resources.js:29:30
LocationHandler@webpack-internal:///./.cache/root.js:67:29 react-dom.development.js:67

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
TestimonialMarqueeFast@webpack-internal:///./src/components/testimonials/TestimonialMarqueeFast.js:75:68
InnerLoadable@webpack-internal:///./node_modules/@loadable/component/dist/loadable.esm.js:166:34
LoadableWithChunkExtractor
Loadable
main react-dom.development.js:67

I'm a complete Newby to pretty much everything I'm doing here, but thought, this may be something not cause by me.
If you're interested, I would be happy to share my repo or anything else which helps you identify the problem.

Cheers

[VerdaKoro]

I found the problem. I didn't realize, that the parallax container doesn't propagate the id=hero and I had to put it into a div.
Thanks again for the nice starter :)