Вызов функции внутри компонента React без сохранения состояния

Я пытаюсь вызвать функцию ButtonAppBar внутри моего компонента без сохранения состояния, но компилятор TS выдает мне эту ошибку: '{' expected. Я не уверен, следует ли мне передавать его моему компоненту New Header или мне следует указать ему тип.

Вот мой компонент

import * as React from "react";
import { withStyles, createStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";

const styles: any = createStyles({
  root: {
    flexGrow: 1
  },
  header: {
    backgroundColor: "#007"
  },
  grow: {
    flexGrow: 1
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20
  }
});

const ButtonAppBar = (styles) => {
  const classes = styles;
  return (
    <div className = {classes.root}>
      <AppBar position = "static" className = {classes.header}>
        <Toolbar>
          <IconButton
            className = {classes.menuButton}
            color = "inherit"
            aria-label = "Menu"
          >
            <MenuIcon />
          </IconButton>
          <Button color = "inherit">Home</Button>
          <Button color = "inherit">Help</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

const NewHeader: React.StatelessComponent<props> = ({}) => {
  return (
    {ButtonAppBar()}
  );
}

export default withStyles(styles, NewHeader);