HTML 音频标签在 Chrome 中不显示，但在控制台的元素中可见并在 Firefox 中工作，为什么？

问：

我有这个反应组件：

import translate from "@kpt/ui/providers/i18n/translateService";
import { Box, Typography } from "@mui/material";
import { IContentProps } from "applications/Training/Domain/ContentsInterface";

interface IAudioPlayerProps {
  content: IContentProps;
}

const AudioPlayer = ({ content }: IAudioPlayerProps) => {
  return (
    <Box height="100%" display="flex" justifyContent="center" alignItems="center">
      <audio id="audio" controls>
        <source src={content?.src} type={content?.mimeType} />
        <Typography>{translate("app.users.formations.browserAudioPlayerError")}</Typography>
      </audio>
    </Box>
  );
};

export default AudioPlayer;

它在 firefox 中工作正常，但在 chrome 中不显示。
音频播放器没有显示，但在元素部分检查控制台时，我可以看到它。
这就像它是隐藏的可见性，但我检查了 css，没有隐藏任何内容。
我试图添加一个 z 索引，但没有成功。
我不明白为什么音频播放器没有显示在 chrome 中，但在 Firefox 中没有问题。
我看到一些人对 angular 有同样问题的旧帖子，但没有看到我的情况的解决方案。
有没有人对 react 有类似的问题并找到了解决方案？