Implement script in React for user consent

How can I implement this script: https://codepen.io/iubenda/pen/MWYOrMw?editors=1010 in React?

<!doctype html>
<html>

<head>
<script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-KJ2TH74');
    </script>

    <script type="text/javascript">
        var _iub = _iub || [];
        _iub.csConfiguration = {
            lang: 'en',
            siteId: 896537, //use your siteId
            cookiePolicyId: 8207462, //use your cookiePolicyId

            enableCcpa: true,
            ccpaApplies: true,

            enableGdpr: true,
            gdprAppliesGlobally: false,
            gdprApplies: true,
            perPurposeConsent: true,

            timeoutLoadConfiguration: 30000,
            consentOnScroll: false, //avoid consent to be given when the user scrolls the page

            banner: {
                position: 'float-top-center',
                acceptButtonDisplay: true,
                customizeButtonDisplay: true,
                rejectButtonDisplay: true,
            },
            
            callback: {
                onPreferenceExpressedOrNotNeeded: function(preference) {
                    dataLayer.push({
                        iubenda_ccpa_opted_out: _iub.cs.api.isCcpaOptedOut()
                    });
                    
                    if (!preference) {
                        dataLayer.push({
                            event: "iubenda_preference_not_needed"
                        });
                    } else {
                        if (preference.consent === true) {
                            dataLayer.push({
                                event: "iubenda_consent_given"
                            });
                        } else if (preference.consent === false) {
                            dataLayer.push({
                                event: "iubenda_consent_rejected"
                            });
                        } else if (preference.purposes) {
                            for (var purposeId in preference.purposes) {
                                if (preference.purposes[purposeId]) {
                                    dataLayer.push({
                                        event: "iubenda_consent_given_purpose_" + purposeId
                                    });
                                }
                            }
                        }
                    }
                }
            }
        };
    </script>
    <script async src="//cdn.iubenda.com/cs/iubenda_cs.js"></script>
</head>
</html>

I am confused whether I should use React hooks, react script library or use another way.. It's based on this article: https://www.iubenda.com/en/help/1235-google-tag-manager-blocking-cookies#publish If you see another way to implement cookie banner and integrate it with Google Tag Manger/Analytics, it would be also useful.

UPDATE

How should it be in this case?

useEffect(() => {
  const script = document.createElement('script');
  script.src = "script.js";
  script.async = true;
  document.body.appendChild(script);
return () => {
    document.body.removeChild(script);
  }
}, []);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);