我有一个包含导出函数的简单组件。我试图在另一个组件中使用此组件。不幸的是，我得到了下面的错误-为什么？
简单导航栏组件：

import * as React from "react";
...

export default function ButtonAppBar() {
return (
<Box sx={{ flexGrow: 1 }}>
  <AppBar position="static">
    <Toolbar>
      <IconButton
        size="large"
        edge="start"
        color="inherit"
        aria-label="menu"
        sx={{ mr: 2 }}
      >
        <MenuIcon />
      </IconButton>
      <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
        News
      </Typography>
      <Button color="inherit">Login</Button>
    </Toolbar>
  </AppBar>
 </Box>
 );
}

Main.js:

import React from "react";
import NavBar from "./NavBar.js";

export default function Main() {
return (
<>
  <NavBar></NavBar>
</>
);
}

出现错误：
警告：无效的挂接调用。只能在函数组件的主体内部调用挂接。以下原因之一可能会导致这种情况：