Cómo mostrar un NFT de Metaplex en React utilizando @metaplex/js y programs.metadata.Metadata.

Estoy tratando de ejecutar este ejemplo de inicio de los documentos. Sin embargo, creo que ha habido un cambio y programs.metadata.Metadata (mostrado allí) ya no funciona.

https://docs.metaplex.com/sdk/js/getting-started

Sugieren esto:

import { Connection, programs } from '@metaplex/js';

const connection = new Connection('devnet');
const tokenPublicKey = 'Gz3vYbpsB2agTsAwedtvtTkQ1CG9vsioqLW3r9ecNpvZ';

const run = async () => {
  try {
    const ownedMetadata = await programs.metadata.Metadata.load(connection, tokenPublicKey);
    console.log(ownedMetadata);
  } catch {
    console.log('No se pudo obtener los metadatos');
  }
};

run();

Tengo esto en mi aplicación de React:

import { Connection, programs } from '@metaplex/js';

const connection = new Connection('devnet');
const tokenPublicKey = 'Gz3vYbpsB2agTsAwedtvtTkQ1CG9vsioqLW3r9ecNpvZ';

const run = async () => {
  try {
    const ownedMetadata = await programs.metadata.Metadata.load(connection, tokenPublicKey);
    console.log(ownedMetadata);
  } catch (error) {
    console.log('No se pudo obtener los metadatos');
    console.log(error);
  }
};

function App() {

return (
    <div classname="App">
      <p onclick="{run}">sería genial si funcionara</p>
    </div>
  );
}

export default App;

Recibo un error como si programs.metadata.Metadata no existiera – “No se pueden leer las propiedades de indefinido (leyendo ‘Metadata’)”. Incluso saqué esto de React y hice un script de nodo simple para ejecutar el código de ejemplo, que falla de la misma manera.

¿Alguna idea de cómo podría solucionar esto?