Facing issues in @walletconnect/solana-adapter

[akashswamy-maticz]

i need to integrate walletconnect(reown) in my project

// SolanaContext.js
import React, { useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { clusterApiUrl } from '@solana/web3.js';
import { WalletConnectWalletAdapter } from '@walletconnect/solana-adapter';
import '@solana/wallet-adapter-react-ui/styles.css';

export const SolanaContext = ({ children }) => {
const endpoint = useMemo(() => clusterApiUrl(WalletAdapterNetwork.Devnet), []);

const wallets = useMemo(() => [
    new WalletConnectWalletAdapter({
        network: WalletAdapterNetwork.Devnet,
        options: {
            projectId: 'Project ID', // Replace with your WalletConnect project ID
        },
    }),
], []);

return (
    <ConnectionProvider endpoint={endpoint}>
        <WalletProvider wallets={wallets} autoConnect>
            {children}
        </WalletProvider>
    </ConnectionProvider>
);

};

this was my code i am geting children of undefined
import React from 'react';
import { useWallet } from '@solana/wallet-adapter-react';
import { WalletConnectButton } from '@solana/wallet-adapter-react-ui';

const Connectbutt = () => {
const { connected } = useWallet();

return (
    <div>
        {!connected ? (
            <WalletConnectButton />
        ) : (
            <span>Connected</span> // You can replace this with your connected UI
        )}
    </div>
);

};

export default Connectbutt;
Walletconnet Model is no trigger i have tryed in so many way
Can any one Hepl me complete this