How do you add a third party script to a. next.js app in 2023?

Question

I am trying to add the following code to my next.js app:

<div id='bro_reservation'></div><input type='hidden' id='cid'     value='nVl0nR9tAGBmFccxf4xvDg%3d%3d' /><input
            type='hidden' id='dbaid' value='L4JAaOi0gExXw5xek9dmgQ%3d%3d' />
    <script type='text/javascript'>
        (function () {
            var po = document.createElement('script');
            po.type = 'text/javascript';
            po.async = true;
            po.src = 'https://bookridesonline.com/web/reservation.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(po, s);
        })();
    </script>

However, when I do this, I get the following error: enter image description here

Is there a way to add this? When i research, i keep seeing things like dangerously set inner html as a solution, or the _documnet.js file, but those aren't working for me. Any suggestions? Thanks coders.

dangerouslysetinnerhtml