Javascript 反应-物料界面菜单工作不正常

我正在使用material ui中的菜单/菜单项。如果我试图根据条件渲染它，它似乎有问题。请参阅下文

const AddSelectItemButton = () => {
    return (
        <>
        <Fab 
            aria-controls="simple-menu" 
            aria-haspopup="true" 
            onClick={handleClick} 
            className={classes.addButton} 
            size="medium" 
            color="primary" 
            aria-label="add"
        >
            <AddIcon />
        </Fab>
        <Menu
            id="simple-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
        >
            <MenuItem onClick={handleDelete}>Delete Item</MenuItem>
            <MenuItem onClick={handleAddNew}>Add Item</MenuItem>
        </Menu>
        </>
    )
}

const AddSelectItemButton=（）=>{
返回(

有人有想法或需要更多信息吗

谢谢！
{！isAuthMode&&(
{!isAuthMode && (
  <AddSelectItemButton />
)} 

)} 
这有助于帮助我重写条件内联。但没有解决我的问题。我发布了一张它的外观图片。代码中是否有其他元素使用该标志isAuthMethod？尝试将排版和AddSelectItem包装在div中。如果使用usestate钩子设置标志，则该标志是异步的，并且有可能在所有其他UI.My项{！isAuthMode&}之后呈现该组件的@user1038449没有其他元素使用此选项，div技巧也没有成功。遗憾的是：/为什么需要条件渲染？@radovix我想在未处于身份验证模式时使用同一组件隐藏此按钮。您可以添加整个组件的代码吗（包括回调和其他内容）？
{!isAuthMode && (
  <AddSelectItemButton />
)}