MUI v4.12.3环境下DatePicker与LocalizationProvider无法渲染的问题求助

大家好，我现在在使用MUI v4.12.3搭配React 17.0.2开发，想集成DatePicker和LocalizationProvider组件，但遇到了渲染问题，想请大家帮忙看看哪里出问题了。

我的环境依赖 #

先贴一下package.json里的相关依赖：

"react": "17.0.2",
"@material-ui/core": "4.12.3",
"@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.11.16",
"@mui/lab": "^5.0.0-alpha.57",
"@mui/material": "^5.12.2",
"@mui/styles": "^5.6.2",
"@mui/x-date-pickers": "^6.8.0",
"dayjs": "^1.11.8"

最初的尝试与问题 #

一开始我是这样导入组件的：

import { DatePicker, LocalizationProvider } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';

使用方式大致是这样的：

return (
  <LocalizationProvider dateAdapter={AdapterDateFns}>
    <DatePicker {/* 相关属性 */} />
    {/* 其他组件内容 */}
  </LocalizationProvider>
)

但问题来了：只要保留LocalizationProvider包裹整个组件，页面就完全无法渲染；如果去掉LocalizationProvider，页面其他内容能正常显示，但DatePicker组件就是不出来。

后续尝试的问题 #

后来我查了一些资料，改成了下面的导入方式：

import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDayjs';

但现在又报错了，提示AdapterDateFns无法从@mui/x-date-pickers/AdapterDayjs导入，虽然之前尝试MUI lab的方式时，系统提示我应该从这个路径导入适配器...

因为项目要求必须保留MUI v4.12.3和React v17的版本，不能升级，所以想问问大家：是不是我的组件导入方式不对？有没有其他适合MUI v4的正确导入方式或者配置方法？

备注：内容来源于stack exchange，提问作者M. Nicol