react .ts文件如何引用组件并在jsx中消费

Question

//menu.ts
import Test from "./test";

export default [
  {
    button: false,
    icon: "iconcheliang-",
    id: "1000",
    level: 0,
    name: "业务中台",
    sign: "smart-community::manage-middleground",
    sort: 1,
    url: "/smart-community/manage-middleground ",
    component: Test,
  },
  {
    button: false,
    icon: "icondaohang-dingdanguanli",
    id: "1101",
    level: 1,
    name: "权限管理",
    parentId: "1000",
    sign: "manage-middleground::authority-management",
    sort: 1,
    url: "/manage-middleground/authority-management",
    component: Test,
  },
  {
    button: false,
    icon: "",
    id: "1102",
    level: 2,
    name: "组织管理",
    parentId: "1101",
    sign: "manage-middleground::organization-management",
    sort: 1,
    url: "/manage-middleground/authority-management/organization-management",
    component: Test,
  },
  {
    button: false,
    icon: "",
    id: "1103",
    level: 2,
    name: "角色管理",
    parentId: "1101",
    sign: "manage-middleground::role-management",
    sort: 2,
    url: "/manage-middleground/authority-management/role-management",
  },
  {
    button: false,
    icon: "",
    id: "1104",
    level: 2,
    name: "职务管理",
    parentId: "1101",
    sign: "manage-middleground::duty-management",
    sort: 3,
    url: "/manage-middleground/authority-management/duty-management",
  },
  {
    button: false,
    icon: "",
    id: "1107",
    level: 2,
    name: "岗位管理",
    parentId: "1101",
    sign: "manage-middleground::position-management",
    sort: 6,
    url: "/manage-middleground/authority-management/position-management",
  },
  {
    button: false,
    icon: "",
    id: "1105",
    level: 2,
    name: "员工管理",
    parentId: "1101",
    sign: "manage-middleground::staff-management",
    sort: 4,
    url: "/manage-middleground/authority-management/staff-management",
  },
  {
    button: false,
    icon: "",
    id: "1106",
    level: 2,
    name: "用户管理",
    parentId: "1101",
    sign: "manage-middleground::user-management",
    sort: 5,
    url: "/manage-middleground/authority-management/user-management",
  },
  {
    button: false,
    icon: "icondaohang-dingdanguanli",
    id: "1201",
    level: 1,
    name: "空间管理",
    parentId: "1000",
    sign: "manage-middleground::space-management",
    sort: 1,
    url: "/manage-middleground/space-management",
  },
  {
    button: false,
    icon: "",
    id: "1202",
    level: 2,
    name: "项目管理",
    parentId: "1201",
    sign: "manage-middleground::project-management",
    sort: 1,
    url: "/manage-middleground/space-management/project-management",
  },
  {
    button: false,
    icon: "",
    id: "1203",
    level: 2,
    name: "楼栋信息",
    parentId: "1201",
    sign: "manage-middleground::building-information",
    sort: 2,
    url: "/manage-middleground/space-management/building-information",
  },
  {
    button: false,
    icon: "",
    id: "1207",
    level: 2,
    name: "单元信息",
    parentId: "1201",
    sign: "manage-middleground::unit-information",
    sort: 3,
    url: "/manage-middleground/space-management/unit-information",
  },
  {
    button: false,
    icon: "",
    id: "1204",
    level: 2,
    name: "房间管理",
    parentId: "1201",
    sign: "manage-middleground::room-management",
    sort: 3,
    url: "/manage-middleground/space-management/room-management",
  },
  {
    button: false,
    icon: "",
    id: "1205",
    level: 2,
    name: "车位管理",
    parentId: "1201",
    sign: "manage-middleground::parking-management",
    sort: 4,
    url: "/manage-middleground/space-management/parking-management",
  },
  {
    button: false,
    icon: "",
    id: "1206",
    level: 2,
    name: "空间信息",
    parentId: "1201",
    sign: "manage-middleground::space-information",
    sort: 5,
    url: "/manage-middleground/space-management/space-information",
  },
  {
    button: false,
    icon: "icondaohang-dingdanguanli",
    id: "1301",
    level: 1,
    name: "客户管理",
    parentId: "1000",
    sign: "manage-middleground::customer-management",
    sort: 1,
    url: "/manage-middleground/customer-management",
  },
  {
    button: false,
    icon: "icondaohang-dingdanguanli",
    id: "1401",
    level: 1,
    name: "设备管理",
    parentId: "1000",
    sign: "manage-middleground::device-management",
    sort: 1,
    url: "/manage-middleground/device-management",
  },
  {
    button: false,
    icon: "",
    id: "1402",
    level: 2,
    name: "设备类型",
    parentId: "1401",
    sign: "manage-middleground::device-type",
    sort: 1,
    url: "/manage-middleground/device-management/device-type",
  },
  {
    button: false,
    icon: "",
    id: "1403",
    level: 2,
    name: "普通设备",
    parentId: "1401",
    sign: "manage-middleground::general-device",
    sort: 2,
    url: "/manage-middleground/device-management/general-device",
  },
  {
    button: false,
    icon: "",
    id: "1404",
    level: 2,
    name: "智能设备",
    parentId: "1401",
    sign: "manage-middleground::smart-device",
    sort: 3,
    url: "/manage-middleground/device-management/smart-device",
  },
  {
    button: false,
    icon: "icondaohang-dingdanguanli",
    id: "1501",
    level: 1,
    name: "系统管理",
    parentId: "1000",
    sign: "manage-middleground::system-management",
    sort: 1,
    url: "/manage-middleground/system-management",
  },
  {
    button: false,
    icon: "",
    id: "1503",
    level: 2,
    name: "字典管理",
    parentId: "1501",
    sign: "manage-middleground::dictionary-management",
    sort: 2,
    url: "/manage-middleground/system-management/dictionary-management",
  },
  {
    button: false,
    icon: "icondaohang-dingdanguanli",
    id: "1601",
    level: 1,
    name: "个人中心",
    parentId: "1000",
    sign: "manage-middleground::personal-center",
    sort: 1,
    url: "/manage-middleground/personal-center",
  },
];

//test.jsx
import React from 'react';

function Test() {
  return (
    <div>
      Test!!!!
    </div>
  );
}

export default Test;

如何在 authenticated-app.tsx 中使用 component 呢

<Route path={`${key}`} element={clickCurrentMenu?.component} />