RejectDialog component with appollo and graphql

MembershipUserDetails.jsx

import React from 'react';
import {graphql} from 'react-apollo';
import {Form, Formik} from 'formik';
import moment from "moment";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  FormControl,
  FormLabel
} from 'material-ui';
import membershipsRejectOneById from '../graphql_queries/memberships_rejectOneById.graphql';

const MembershipUserDetails = ({membership}) => {
  const userDetails = membership.userDetails;
  return (
    <FormControl
      fullWidth>
      <DialogContentText>
        <p>
          {userDetails.firstName} {userDetails.lastName}
          <strong> \ </strong>
          {moment(userDetails.dateOfBirth).format('MM/DD/YYYY')}
          <strong> \ </strong>
          {userDetails.phoneNumber}
        </p>
        {
          userDetails.userMobility &&
          userDetails.userMobility.length > 0 &&
          <p>
            Mobility Options:
            <ul>
              {
                userDetails.userMobility.map((mobility, index) => {
                  return <li key={`membership-details-mobility-${index}`}>{mobility.name} {mobility.notes}</li>
                })
              }
            </ul>
          </p>
        }
      </DialogContentText>
    </FormControl>
  );
}

@graphql(membershipsRejectOneById)
class MembershipsRejectDialog extends React.Component {
  handleSubmit = async (id) => {
    return await this.props.mutate({
      variables: {
        id
      }
    });
  }

  render() {
    return (
      <Dialog open={!!this.props.selectedMembership}
              onClose={this.props.onDialogClose}>
        <Formik
          initialValues={{
            selectedMembership: this.props.selectedMembership
          }}
          onSubmit={(values) => this.handleSubmit(values.selectedMembership._id).then(() => this.props.onDialogClose())}
          render={({isSubmitting, values}) => {
            return (
              <Form>
                <DialogTitle>
                  <div className="grey">Reject membership request</div>
                </DialogTitle>
                <DialogContent>
                  <MembershipUserDetails membership={values.selectedMembership}/>
                  <FormLabel>
                    Do you really want to reject this membership request?
                  </FormLabel>
                  <DialogActions>
                    <span className="black-54 small-font pointer-cursor"
                          onClick={this.props.onDialogClose}>Cancel</span>
                    <Button raised
                            color="primary"
                            type='submit'
                            disabled={isSubmitting}>Reject request</Button>
                  </DialogActions>
                </DialogContent>
              </Form>
            );
          }}/>
      </Dialog>
    );
  }
}

export default MembershipsRejectDialog;