My React website works as intendet on the developement server but not on the real website - where do I have to look for the reason?

I want to embed a datawrapper map like this:

import InnerHTML from 'dangerously-set-html-content'
export function Map1(){
    const htmlFile = `<div style="min-height: 374px">
        <script type="text/javascript" defer src="src/utils/mapscript.js" charset="utf-8">
        </script>
        <noscript>
        <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
        </noscript>
</div>`
return(
    <InnerHTML html={htmlFile} />
)   
}

and it works perfectly fine on the development server, displays everything. But on the website itself, it does not display. Not even the image specified in the "noscript" part. In the console of the webpage it says for the mapscript.js file:

Uncaught SyntaxError: expected expression, got '<'

But the file starts like "!function(){"use strict";const t=new Set(["0","false","null"]),e={allowEditing:Boolean,dark:function" so I have no idea where the "<" supposedly comes from.

The pipeline on GitLab for the website passed. Let me know what further information is needed for the description.

To try and solve it I used different versions:

export function Map2(){
    const htmlFile = `<div style="min-height: 374px">
        <script type="text/javascript" defer src="src/utils/mapscript.js" charset="utf-8">
        </script>
        <noscript>
        <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
        </noscript>
</div>`
return(
    <div dangerouslySetInnerHTML={{ __html: htmlFile }} />
)   
}

import DOMPurify from 'dompurify';
export function Map1(){
    const htmlFile = `<div style="min-height: 374px">
        <script type="text/javascript" defer src="src/utils/mapscript.js" charset="utf-8">
        </script>
        <noscript>
        <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
        </noscript>
</div>`
const sanitizedHTML = DOMPurify.sanitize(htmlFile);
return(
    <InnerHTML html={htmlFile} />
)   
}

export function Map3(){
    return(
        <div style={{minHeight: "374px"}}>
        <script type="text/javascript" defer src="src/utils/mapscript.js" charet="utf-8">
        </script>
        <noscript>
        <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
        </noscript>
</div>
    )
}

But they did not work on the website or on the development server, so i discarded them.

@AKX solved my question:

The mapscript.js file is not in the public folder of my project and that's why it is giving error not found.

Now I have to figure out how to get that into the public folder so the error should go away.