Hydration problem in Next.js when using the ENV variable for the Image component

ran into a problem with hydration in Next.js with Strapi. I'm getting all the data through GraphQL. Strapi gives me the paths to the image without http:/localhost:/1337. As this is different from the production site, I decided to make an ENV variable. To parse this to the full image path, I created a function:

interface ImageProp {
    data: {
        attributes: {
            url: string,
        }
    }
}

export function strapiImage(src: ImageProp) {
    return process.env.STRAPIHOST + src.data.attributes.url;
}

In the browser console, when opening the Next.js project recently, I started getting an error. It wasn't there before and I don't understand where it's coming from now:

client.js:1 Warning: Prop `src` did not match. 
Server: "http://localhost:1337/uploads/illustration_cleaning_4c030558a9.svg"
Client: "undefined/uploads/illustration_cleaning_4c030558a9.svg"

If I change the variable to the string 'localhost:1337' in the function code, the error disappears. Can you tell me what this could be about and how to solve it?

In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_

Try changing env to NEXT_PUBLIC_STRAPIHOST