我尝试将脚本嵌入到我的next.js应用程序中，但是它位于页面的末尾，而不是我放置它的位置。
我已经采用了如何使用Next Script精确控制脚本标记插入位置中提到的解决方案，但问题仍然存在。我还尝试将其嵌入到此处描述的应用程序脚本方法https://nextjs.org/docs/basic-features/script中，但得到了相同的结果。
我的helloworld.tsx在页面中看起来像这样：

import React, { useRef } from 'react'
import Script from 'next/script'

export const HelloWorld = () => {

    const containerRef = useRef(null)

    function moveScript() {
        containerRef.current.appendChild(this)
    }

    return (
        <>
            <p>This goes before the embedding</p>
            <div ref={containerRef} id="script-container">
                <Script strategy="lazyOnload" id="asciicast-aMFGH8jU7O7uo94YZyWJEZtnO" type="text/javascript" src="https://asciinema.org/a/aMFGH8jU7O7uo94YZyWJEZtnO.js" async onLoad={moveScript}/>
            </div>
            <p>This goes after the embedding <br /></p>
        </>
    );
};
export default HelloWorld;

在生成的页面上，嵌入在页面的底部，但我希望它在两段之间。
我错过了什么？