[question]How to support browser extension to connect wallet in @tonconnect/ui-react?

[leslie555]

I saw the connect button in the site support using browser extension to connect Tonkeeper wallet. But my mini-app doesn't support it. It will open a new tab (see screenshot 4) in Chrome when I click Tonkeeper in the connect modal.
The first 2 screenshots are from the website above. The 3rd and the 4th screenshots are from my mini-app.
My app configuration:

import { THEME, TonConnectUIProvider, TonConnectButton } from '@tonconnect/ui-react';

        <TonConnectUIProvider
          manifestUrl="https://leslie555.github.io/TG-mini-app/tonconnect-manifest.json"
          uiPreferences={{ theme: THEME.DARK }}
          walletsListConfiguration={{
            includeWallets: [
              {
                appName: 'tonkeeper',
                name: 'Tonkeeper',
                imageUrl: 'https://tonkeeper.com/assets/tonconnect-icon.png',
                tondns: 'tonkeeper.ton',
                aboutUrl: 'https://tonkeeper.com',
                universalLink: 'https://app.tonkeeper.com/ton-connect',
                deepLink: 'tonkeeper-tc://',
                jsBridgeKey: 'tonkeeper',
                bridgeUrl: 'https://bridge.tonapi.io/bridge',
                platforms: ['ios', 'android', 'chrome', 'firefox', 'macos'],
              },
              {
                appName: 'tonwallet',
                name: 'TON Wallet',
                imageUrl: 'https://wallet.ton.org/assets/ui/qr-logo.png',
                aboutUrl:
                  'https://chrome.google.com/webstore/detail/ton-wallet/nphplpgoakhhjchkkhmiggakijnkhfnd',
                universalLink: 'https://wallet.ton.org/ton-connect',
                jsBridgeKey: 'tonwallet',
                bridgeUrl: 'https://bridge.tonapi.io/bridge',
                platforms: ['chrome', 'android'],
              },
              {
                appName: 'nicegramWallet',
                name: 'Nicegram Wallet',
                imageUrl: 'https://static.nicegram.app/icon.png',
                aboutUrl: 'https://nicegram.app',
                universalLink: 'https://nicegram.app/tc',
                deepLink: 'nicegram-tc://',
                jsBridgeKey: 'nicegramWallet',
                bridgeUrl: 'https://bridge.tonapi.io/bridge',
                platforms: ['ios', 'android'],
              },
              {
                appName: 'fintopio-tg',
                name: 'Fintopio Telegram',
                imageUrl: 'https://fintopio.com/favicons/favicon-196x196.png',
                aboutUrl: 'https://fintopio.com',
                universalLink: 'https://t.me/fintopio?attach=wallet',
                bridgeUrl: 'https://wallet-bridge.fintopio.com/bridge',
                platforms: ['ios', 'android', 'macos', 'windows', 'linux'],
              },
            ],
          }}
          actionsConfiguration={{
            twaReturnUrl: 'https://leslie555.github.io/TG-mini-app',
          }}
        >
         <TonConnectButton className="ml-auto" />
       </TonConnectUIProvider>