How to dynamically change a header text on Material UI dialogue with an if statement?

Modal.js

import { Dialog, DialogTitle, DialogContent, DialogActions } from "@material-ui/core";

const Modal = (props) => {
const { title } = props;

<Dialog>
   <DialogTitle>
      {title} // <- Where the dialog header text is passed into.
   </DialogTitle>
   <DialogContent/>
   <DialogActions/>
</Dialog>

}

Main.js I've create an if statement to change the header title between Add Information and Edit Information.

import Modal from "../Modal";

<Modal
   title={() => {
       if (materialValues.id === 0) { // <- materialValue.id = 0 if adding new information.
           return "Add Information";
       } else {
           return "Edit Information";
       }
   }}
/>

I feel that this code should work, but it comes out empty without any error statement.