asyncapi-react: "Error: Cannot read property '0' of undefined" when using react-component with NextJS

Description

I’m trying to use this component inside a NextJS application. The component looks like this:

import React, { FunctionComponent } from 'react';
import dynamic from 'next/dynamic';

const AsyncApi = dynamic(import('@asyncapi/react-component'), { ssr: false });

const AsyncApiContainer: FunctionComponent = () => (
  <AsyncApi
    schema={{ url: 'https://raw.githubusercontent.com/shlinkio/shlink/v2.4.1/docs/async-api/async-api.json' }}
    config={{ showErrors: process.env.NODE_ENV !== 'production' }}
  />
);

export default AsyncApiContainer;

I can see the url being loaded in the browser developer tools, but once loaded I see this error:

I have also tried hardcoding the spec in the schema property, with the same result, so I think I may have some invalid property somewhere.

However, if I test that schema in the playground https://playground.asyncapi.io/, it doesn’t throw any error and everything works.

I also see this warning in the browser’s console, but I can’t confirm it is related.

Expected result

The component properly loads in the UI, with no errors

Actual result

Error: Cannot read property ‘0’ of undefined is displayed

Steps to reproduce

Use the code snippet above on a NextJS app