Loading different external css files and external javascript files in the tag and at the bottom of the tag in ReactJS

I am pretty new to ReactJS and I am doing some experiment to learn it more properly. Currently, I am converting a html/css/javascript template into ReactJS. What I previously used to do is to simply put the external css and js files in the index.html file itself, like this:-

<head>
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/admin-template/assets/vendor/fonts/boxicons.css"/>
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/admin-template/assets/vendor/fonts/fontawesome.css"/>
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/admin-template/assets/vendor/fonts/flag-icons.css"/>
</head>
<body>
---------------------
---------------------
---------------------
---------------------
    <script src="%PUBLIC_URL%/admin-template/assets/vendor/js/script1.js"></script>
    <script src="%PUBLIC_URL%/admin-template/assets/vendor/js/script2.js"></script>
</body>

But then I realize two things:-

It is not the right thing to do.
If I have to use multiple templates, like one for the admin panel
and one for the front end side, I can simply put all the css, js,
etc. in the index.html like this. Since ReactJS is a single page
application, there is a high chance that putting all css, js, etc.
in the index.html file will cause a major clash/conflict among the
external files.

So I discovered this approach.

import { useEffect } from 'react';

function PreLoginHeaderScript() {

    useEffect(() => {    
        var baseUrl             = process.env.REACT_APP_PUBLIC_URL;

        // CSS //        
        const cssBoxIcon        = document.createElement('link');
        cssBoxIcon.id           = 'boxicon-css';
        cssBoxIcon.href         = baseUrl + 'admin-template/assets/vendor/fonts/boxicons.css';
        cssBoxIcon.rel          = 'stylesheet';
        cssBoxIcon.type         = 'text/css';
        
        // Scripts //
        const scriptHelper   = document.createElement('script');
        scriptHelper.id      = 'helper-script';
        scriptHelper.src     = baseUrl + 'admin-template/assets/vendor/js/helpers.js';
        scriptHelper.async   = true;

        if (!document.getElementById('boxicon-css')) {
            // loading css in the head
            document.head.appendChild(cssBoxIcon);
        }
        if (!document.getElementById('helper-script')) {
            // loading script at the end of the body
            document.body.appendChild(scriptHelper);
        }
    }, []);
    
}

export default PreLoginHeaderScript;

This approach is working like a charm. The result is like this:-

<head>
    ---------------------
    ---------------------
    <link rel="stylesheet" type="text/css" href="http://localhost:5052/admin-template/assets/vendor/fonts/boxicons.css"/>
</head>
<body>
---------------------
---------------------
---------------------
---------------------
    <script src="http://localhost:5052/admin-template/assets/vendor/js/helpers.js"></script>
</body>

However, I want to make it more refined by using the stack/push concept of Laravel in it. In laravel, one can declare stacks like this:-

<head>
    ---------------------
    ---------------------
    <link rel="stylesheet" type="text/css" href="{{asset('admin-template/assets/vendor/fonts/boxicons.css')}}"/>
    @stack('css')
</head>
<body>
---------------------
---------------------
---------------------
---------------------
    <script src="{{asset('admin-template/assets/vendor/js/helpers.js')}}"></script>
    @stack('script')
</body>

Now if someone wants to push external css files in the stack ‘css’, he just need to use the LOC like this:-

@push('css')
    <link rel="stylesheet" type="text/css" href="{{asset('admin-template/assets/vendor/fonts/flagicons.css')}}"/>
@endpush

Similarly, to put external javascript file, one can do like this

@push('script')
    <script src="{{asset('admin-template/assets/vendor/js/misc.js')}}"></script>
@endpush

As such, the resultant html comes like this:-

<head>
    ---------------------
    ---------------------
    <link rel="stylesheet" type="text/css" href="http://localhost/test-laravel/admin-template/assets/vendor/fonts/boxicons.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/test-laravel/admin-template/assets/vendor/fonts/flagicons.css"/>
</head>
<body>
---------------------
---------------------
---------------------
---------------------
    <script src="http://localhost/test-laravel/admin-template/assets/vendor/js/helpers.js"></script>
    <script src="http://localhost/test-laravel/admin-template/assets/vendor/js/misc.js"></script>
</body>

The difference is that in document.head.appendChild(cssBoxIcon); or document.body.appendChild(scriptHelper); the css/scripts are appended just before the ending of the or tags. But the Laravel stack/push method allows one to push css or scripts at any position where the stack with the provided name has been defined.

How can I do this in ReactJS?