I have a fresh react typescript project and I am trying to implement the below:

https://developers.cardano.org/docs/get-started/mesh/wallets-integration

BUT…

I’m continuously getting this error:

Compiled with problems:
ERROR in ./node_modules/@emurgo/cardano-message-signing-browser/cardano_message_signing_bg.js 25:71-89
Can’t import the named export ‘memory’.’buffer’ (imported as ‘wasm’) from default-exporting module (only default export is available)

Thank you and your help will be appreciated.!!

Below is my component tsx file.
`

import * as React from "react";
import { useWalletList } from '@meshsdk/react';


type WalletProps = {
    href: string;
    targetBlank: boolean;
    children: React.ReactNode;
}

export default function Wallet({ href, targetBlank = false, children }: WalletProps) {

    const wallets = useWalletList();

    return (
        <>
            <a
                className="App-link"
                href={href}
                target={targetBlank ? "_blank" : "_self"}
                rel={targetBlank ? "noopener noreferrer" : ''}
            >
                {children}
            </a>
            {wallets.map((wallet, i) => {
                return (
                    <p key={i}>
                        <img src={wallet.icon} style={{ width: '48px' }} />
                        <b>{wallet.name}</b>
                    </p>
                );
            })}
        </>
    )
}``