Dynamic input fields in React using functional component

I am trying to create dynamic input fields in my react application(using Material UI) on the click of a button. Whenever the add button is clicked, it creates a new input field inside a dialog box but I can't seem to enter any values in the text-field. Following is my app.js file -

import React from "react";
import "./styles.css";
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 IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
import { Box, Grid } from "@material-ui/core";

export default function App() {
  const [open, setOpen] = React.useState(false);
  const [values, setValues] = React.useState([]);
  const [text, setText] = React.useState("");

  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
    setValues([]);
  };
  const handleChangeText = (e) => {
    setText(e.target.value);
  };
  const addValue = () => {
    setValues([...values, ""]);
  };
  const handleValueChange = (index, e) => {
    values[index] = e.target.value;
    console.log(values);
    setValues(values);
  };
  const deleteValue = (jump) => {
    setValues(values.filter((j) => j !== jump));
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Create
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">New Dialog</DialogTitle>
        <DialogContent>
          <DialogContentText>Sample Text.</DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            value={text}
            onChange={handleChangeText}
            label="Text"
            fullWidth
          />
          {values.map((jump, index) => (
            <Box key={"jump" + index}>
              <Grid container spacing={1} alignItems="flex-end">
                <Grid item xs={10}>
                  <TextField
                    autoFocus
                    margin="dense"
                    label="Value"
                    value={jump || ""}
                    onChange={(e) => handleValueChange(index, e)}
                    fullWidth
                  />
                </Grid>
                <Grid item xs={2}>
                  <div
                    className="font-icon-wrapper"
                    onClick={() => deleteValue(jump)}
                  >
                    <IconButton aria-label="delete">
                      <DeleteIcon />
                    </IconButton>
                  </div>
                </Grid>
              </Grid>
            </Box>
          ))}
        </DialogContent>
        <Button onClick={addValue} color="primary">
          Add
        </Button>
        <DialogActions>
          <Button onClick={handleClose} variant="contained" color="secondary">
            Cancel
          </Button>
          <Button onClick={handleClose} variant="contained" color="primary">
            Create
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Here is the code sandbox link.

I have a simple text field inside the dialog box also that works perfectly. The problem is with the dynamic fields. I don't know what mistake I am making in this code. Someone please help me out. Thanks in advance