Error when using usercentrics (via gtm) and id's in some components

we try to switch from our own implemented CMP to usercentrics. Therefore we integrated usercentrics via gtm on our page. I realized that the element is only shown on our subpages and is not visible on our root page. After two days of removing and adding components again. I found out that usercentrics was able to load when I removed the id={"process"} from the component. I'm using multiple times the id tag for a smoothscroll plugin on our page. But only the one applied on the process and the one applied on the contact section are the ones that lead to the error below.

After I removed the plugin and nearly all id's beside one, I got the following error:

Uncaught TypeError: Cannot read property 'REACT_APP_SC_ATTR' of undefined
    at bundle_legacy.js:1
    at bundle_legacy.js:15

We're using a Gatsby Stack with Typescript and gatsby-plugin-smoothscroll for scrolling.

We implemented gtm via a Gatsby Plugin as well: gatsby-plugin-google-tagmanager

import React from "react";
import colors from "../../../../config/GlobalStyles";
import {Container, Grid, makeStyles, Typography} from "@material-ui/core";

// @ts-ignore
import infoGraphic from "../../../../images/root/process/infographic.webp";
import {graphql, useStaticQuery} from "gatsby";
import Markdown from "markdown-to-jsx";

const useStyles = makeStyles((theme) => ({
    contentWrapper: {
        paddingTop: "50px"
    },
    container: {
        paddingTop: "50px",
        backgroundColor: "white",
    },
    headline: {
        fontWeight: 600,
        color: colors.main
    },
    secondHeadline: {
        fontFamily: "Mackay",
        color: colors.main,
        fontWeight: 400,
    },
    infoGraphicWrapper: {
        overflow: "scroll",
        [theme.breakpoints.down('sm')]: {
            marginTop: "50px",
        },
        "& img": {
            [theme.breakpoints.down('sm')]: {
                maxWidth: "200%"
            }
        }
    }
}));

export default function ProcessSection() {
    const classes = useStyles();
    const data = useStaticQuery(query);

    return (
        <section>
            <Container className={classes.container}>
                <Typography variant={"h2"} component={"h2"} className={classes.headline}>
                    <Markdown>
                        {data.strapiHome.process.headline}
                    </Markdown>
                </Typography>
                <Typography variant={"h2"} component={"h2"} className={classes.secondHeadline}>
                    <Markdown>
                        {data.strapiHome.process.secondHeadline}
                    </Markdown>
                </Typography>
                <Grid container className={classes.contentWrapper} justify={"space-between"}>
                    <Grid item xl={4} lg={4} md={4} sm={12} xs={12}>
                        <Typography component={"div"} variant={"body2"}>
                            <Markdown>{data.strapiHome.process.text}</Markdown>
                        </Typography>
                    </Grid>
                    <Grid item xl={7} lg={7} md={7} sm={12} xs={12} className={classes.infoGraphicWrapper}>
                        <img src={infoGraphic} alt={"alt text"} />
                    </Grid>
                </Grid>
            </Container>
        </section>
    );
}

const query = graphql`
    query {
        strapiHome {
            process {
                headline
                secondHeadline
                text
            }
        }
    }
`;

I have no idea where this is coming from and what the env variables mean.

I was able to resolve the issue by removing all id's from my components and add some of them again.

I was not able to understand why this happened.