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