如何在@ant-design/pro-layout中使用通知菜单？

npm install @ant-design/pro-layout antd --save

import React from 'react';
import { notification, Menu } from 'antd';
import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';
import '@ant-design/pro-layout/dist/layout.css';
import '@ant-design/pro-layout/dist/antd.css';

const notifications = [
  {
    key: '1',
    title: '通知标题1',
    content: '通知内容1',
    onClick: () => {
      // 点击通知后的回调函数
      console.log('点击了通知1');
    },
  },
  {
    key: '2',
    title: '通知标题2',
    content: '通知内容2',
    onClick: () => {
      // 点击通知后的回调函数
      console.log('点击了通知2');
    },
  },
];

const BasicLayout = () => {
  return (
    <ProLayout
      title="云计算专家"
      menuDataRender={() => []} // 禁用默认菜单
      notification={notifications} // 传递通知菜单的数据源
    >
      {/* 页面内容 */}
    </ProLayout>
  );
};

const handleButtonClick = () => {
  notification.open({
    message: '通知菜单',
    description: '点击查看通知',
    onClick: () => {
      // 点击通知菜单的回调函数
      console.log('点击了通知菜单');
    },
  });
};