SyntaxError: Named export 'styled' not found. The requested module '@mui/material/styles/index.js' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

認証サポートのドキュメント例と、@api-platform/admin/lib/layout/Error.js にあるスタックトレースの位置から始めます。示されている HydraAdmin のセットアップと公式の Docker イメージを使ってエラーを再現し、その後、パッケージのモジュールインポートと、@mui/material/styles/index.js で報告されている失敗を比較します。ドキュメントに記載された認証セットアップがこのサーバーエラーなしでレンダリングされれば完了です。

API Platform version(s) affected: '@api-platform/admin': ^3.4.3

Description
I trying run auth on admin but I got error:

Server Error
SyntaxError: Named export 'styled' not found. The requested module '@mui/material/styles/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@mui/material/styles/index.js';
const { styled } = pkg;

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///srv/app/node_modules/.pnpm/@api-platform+admin@3.4.3_zula6vjvt3wdocc4mwcxqa6nzi/node_modules/@api-platform/admin/lib/layout/Error.js (15)
ModuleJob._instantiate
node:internal/modules/esm/module_job (124:21)
async ModuleJob.run
node:internal/modules/esm/module_job (190:5)

How to reproduce
I just using code from docs: https://api-platform.com/docs/admin/authentication-support/

Possible Solution
I don't now. Frontend has never been my strong suit

Additional Context
Using this:

import React from 'react';
import ReactDOM from 'react-dom';
import { HydraAdmin } from '@api-platform/admin';

const Admin = () => <HydraAdmin entrypoint="https://demo.api-platform.com" />;

ReactDOM.render(<Admin />, document.getElementById('root'));

I am getting exactly the same error.

I using official docker images: https://github.com/api-platform/api-platform