我有这个react组件：

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上遇到过类似的问题，并找到了解决方案？