我尝试使用三元运算符在react中实现条件渲染，但是我似乎不能正确使用语法。下面是我的结果：

const [isDeleted, setIsDeleted] = useState(false);

我有一个删除用户的功能：

const deleteUser = () => {
    axios.post("http://localhost:5000/delete", []).then((resp) => {
      setIsDeleted(resp.data);
      isDeleted(true);
    });
  };

我调用下面的deleteUser函数onclick，它将isDeleted更改为true。

<Box>
            <Button
              sx={{
                padding: "10px 20px",
              }}
              onClick={deleteUser}
            >
              Delete User
            </Button>
          </Box>

下面，如果isdeleted为true，则使用三元运算来呈现successfully deleted，如果isdeleted为false，则显示Hello User。我所拥有的只是将其打印在屏幕上。我似乎无法获得正确的语法。

<Typography
                fontWeight="bold"
              >
                isDeleted? Successfully Deleted : Hello User
              </Typography>