UI-React : error with TonConnectButton

[itsalimanuel]

Describe the bug

I'm trying to import the <TonConnectButton/> component in two places on my website: in the header and at the end of the website. The point is that the component is imported only in the header; in the last section of the website, the component is not visible. When I checked the inspect tool. I saw <div id="ton-connect-button" style="width: fit-content;"></div>,but it does not exist in the UI at all.

Expected behavior

The second component should be visible.

Current behavior

The second component not exist.

Steps to Reproduce

1. Create 2 sections
2. import the TonConnectButton component in the first section.
3. import the TonConnectButton component in the second section.

Environment

• @tonconnect/ui-react@2.0.6 -> ./node_modules/.pnpm/@tonconnect+ui-react@2.0.6_react-dom@18.3.1_react@18.3.1/node_modules/@tonconnect/ui-react
• ProductName: macOS ProductVersion: 14.5 BuildVersion: 23F79
• Browser: DuckDuck go

Additional context

No response

[phumaster]

I think they're using an id in div to determine where the button is placed. You can create another button on your own and then use the hook to open connect modal like this:

const modal = useTonConnectModal();

<button onClick={() => modal.open()}>
   Connect Wallet
</button>

[itsalimanuel]

@phumaster , Thanks, I already fixed it, but it was my mistake to keep the state open.