I want to add some external scripts to my ReactJS/TS app and I would like to add these scripts not into index.html but with another component.

if (root) {
  createRoot(root).render(
    <>
      <Scripts />
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<PageWrapper />}>
            <Route index element={<UserEdit />} />
            <Route path="user/edit" element={<UserEdit />} />
            <Route path="user/:id" element={<UserPage />} />
            <Route path="*" element={<NoPage />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  )
}

this is how I would like code to look. component looks like this:

const Scripts = () => {
    const scripts: Scripts = ["frontend/js_clean/check.js","frontend/js_clean/user.js"...]
    return ({scripts.map(script => <script type="text/javascript" src="`${process.env.ASSETS_CDN}/${script}`"></script>)})
}

But the problem is that components which go after component using variables and functions from external scripts and when I try to start app it gives me an error like:

TypeError: window.isJsonString is not a function

window.isJsonString is declared into frontend/js_clean/user.js script which I try to include into component. So I am wondering if there is another way to add external scripts to the project without hardcoding it into index.html.

Thanks in advance!