Gatsby anchor link / scrollTo hiding the page above the displayed element

Question

I am using Gatsby for the first time and I have started with the Cara starter template.

I have added a link to the hero that would scroll to the next sections (projects) when clicked.

The link does take you to the next section, however the scroll bar remains scrolled all the way to the top of the bar. Meaning that you cannot scroll back up the page. (Strangely now when you scroll to the bottom of the page, the footer is not aligned with the bottom of the page, but you can now scroll all the way back to the top of the page again.)

I tried using various techniques; a standard anchor tag referencing an id, using gatsby-plugin-smoothscroll to scrollTo() the element, and all have this same end result.

I'm not sure what is causing this behaviour, but maybe it is something to do with the layout or some conflicting scrolling or offsetting. I would appreciate any help to get me back on track.

I have hosted what I have done so far, so that you can see the issue I am having: https://portfoliositemain36740.gatsbyjs.io/