It seems that react-helmet-async doesn't keep the order of the scripts added in the jsx

[meesfrenkelfrank]

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. So it's not respecting the order, added in the jsx. What could be the issue?

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