Script tags are not rendered in correct order using React Helmet

Question

I am using react-helmet-async to add three scripts in order to the HEAD element on a specific page in my React app:

import React from 'react';

import { Helmet } from 'react-helmet-async';

import { Props } from './Advertising.types';

const MyComponent = ({ id, type }: Props) => {
  return (
    <Helmet>
  <script>{`var myData = { "id":"${id}", "type":"${type}" };`}</script>
  <script src="https://thirdparty.com/js/main.js" />
  <script
    type="application/javascript"
    src="thirdparty2.com/main.js"
  />
</Helmet>
  );
};

When navigating to a page the first <script> tag is rendered as last in the dom. But it should be rendered first. What could be the issue?

(When refreshing the page manually the script tags are in correct order).