WalletNotReadyError- I got it when I develop Solana wallet integration with React.js in chrome extension

Question

I am developing twitter extension for the website. When I try to connect dapp and phantom wallet in react.js project, it works. but If I try it in chrome extension, then doesn't work.

import {
    useConnection,
    useWallet,
} from '@solana/wallet-adapter-react';
import {
    WalletModalProvider,
    WalletDisconnectButton,
    WalletMultiButton,
} from '@solana/wallet-adapter-react-ui';

const MyWallet: React.FC = () => {
    const wallet = useWallet();
    return (
        <>
            {wallet.connected &&
                <p>Your wallet is {walletAddress}</p> ||
                <p>Hello! Click the button to connect</p>
            }

            <div className="multi-wrapper">
                <span className="button-wrapper">
                    <WalletModalProvider>
                        <WalletMultiButton />
                    </WalletModalProvider>
                    <button
                        disabled={btnLoading}
                        onClick={paySol}
                    >
                        Pay Now!
                    </button>
                </span>
                {wallet.connected && <WalletDisconnectButton />}
            </div>
        </>
    );
};

export default MyWallet;

I had WalletNotReadyError when I connect phantom wallet there. enter image description here

I need help of person who has experience in chrome extension & solana wallet integration. Thank you.