How to manage and display Webassembly Gui app in Next.js

I have compiled a Gui app to Wasm file, together with a generated JS file.

The Wasm file actually contains one infinite loop function fn start() -> void that display a 3D animation.

The problem is

1. Although calling wasm.start() can display the animation, it is out of control. The animation will display in all the pages. How can I restrict it within one particular component?

2. The animation window loses interactive ability. It can't respond to mouse and keyboard any longer as it should do. What is the correct way to start the animation?

3. I have to call start within a try-catch scope, or otherwise the compiler reports errors. Why?

Currently what I did looks like

// second_page.tsx

export default function SecondPage() {
// ... something else

const startWasm = async () => {
        try {
            start()           // this function is imported from the Wasm 
        } catch (error) {
        }
    }

//... something else

return <h1>Second Post
        <div >
             <button onClick={() => startWasm()}>     // OnClick of the button
                      Click to Start
            </button>
        </div>
        <h2>
            <Link href="/">
                <a>Back to home</a>
            </Link>
        </h2>

    </h1 >;
}
}