multi-stage react material-ui modal

FormDialog.jsx

import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import Parser from "rss-parser";
import CircularProgress from "@material-ui/core/CircularProgress";

function FormDialog() {
  const [open, setOpen] = React.useState(false);
  const [modalIndex, setModal] = React.useState(0);
  const [url, setUrl] = React.useState("");
  const [name, setName] = React.useState("");
  const [isLoadingName, setIsLoadingName] = React.useState(false);

  async function fetchFeedName(url) {
    try {
      setIsLoadingName(true);
      const parser = new Parser();
      const CORS_PROXY = "https://cors-anywhere.herokuapp.com/";
      let feed = await parser.parseURL(CORS_PROXY + url);
      console.log(feed.title);
      setName(feed.title);
      setIsLoadingName(false);
    } catch (err) {
      console.log(err);
      setIsLoadingName(false);
    }
  }

  React.useEffect(() => {
    if (url !== "") {
      fetchFeedName(url);
    }
  }, [url]);

  function handleClickOpen() {
    setUrl("");
    setName("");
    setModal(0);
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
  }

  function handleNext() {
    if (modalIndex < 1) {
      setModal(modalIndex + 1);
    }
  }

  function handleOK() {
    setOpen(false);
    console.log("url", url, " name", name);
  }

  function handleKeyPressName(e) {
    if (e.key === "Enter") {
      handleOK();
    }
  }
  function updateUrl(e) {
    setUrl(e.target.value);
  }

  function handleKeyPressURL(e) {
    if (e.key === "Enter") {
      handleNext();
      updateUrl(e);
    }
  }
  const FirstModal = (
    <>
      <DialogTitle id="form-dialog-title">Feed URL</DialogTitle>
      <DialogContent>
        <DialogContentText>Enter the Feed URL.</DialogContentText>
        <TextField
          autoFocus
          margin="dense"
          id="name"
          label="URL"
          type="url"
          fullWidth
          onBlur={updateUrl}
          key="urlField"
          onKeyPress={handleKeyPressURL}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary">
          Cancel
        </Button>
        <Button type="submit" onClick={handleNext} color="primary">
          Next
        </Button>
      </DialogActions>
    </>
  );

  const SecondModal = (
    <>
      <DialogTitle id="form-dialog-title">Name of feed</DialogTitle>
      <DialogContent>
        <DialogContentText>Enter the name of the feed.</DialogContentText>
        {isLoadingName === true ? (
          <CircularProgress />
        ) : (
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Name"
            type="text"
            fullWidth
            onChange={e => setName(e.target.value)}
            key="nameField"
            value={name}
            onKeyPress={handleKeyPressName}
          />
        )}
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary">
          Cancel
        </Button>
        <Button type="submit" onClick={handleOK} color="primary">
          OK
        </Button>
      </DialogActions>
    </>
  );

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Add Feed
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
        fullWidth
      >
        {!modalIndex ? FirstModal : SecondModal}
      </Dialog>
    </div>
  );
}

export default FormDialog;