Random CKEditor Appears

Question

So I am using a CKEditor and everytime I switch views, an extra one randomly appears. For Example.

I then press Next Step and then Previous Step and this is what happens...

Here is my code...

import { Grid, TextField } from "@material-ui/core";
import styles from "./ProblemLeftPaneStyles.module.css";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { useState } from "react";

const ProblemLeftPaneV1 = (props) => {
  const [description, setDescription] = useState(localStorage.getItem("problemDescription") === null ? '' : localStorage.getItem("problemDescription"));  
  const [title, setTitle] = useState(localStorage.getItem("problemTitle") === null ? '' : localStorage.getItem("problemTitle"));

  const updateDescription = (event, editor) => {
    localStorage.setItem("problemDescription", editor.getData());
    setDescription(editor.getData());
  };

  const updateTitle = (event) => {
    localStorage.setItem("problemTitle", event.target.value);
    setTitle(event.target.value);
  };  

  const editor = (
    <CKEditor id={1} editor={ClassicEditor} onChange={updateDescription} data={description}/>
  );

  return (
    <Grid className={styles.leftPane} xs={6} item={true} container>
      <div className={styles.content}>
        <form onSubmit={props.formSubmission}>
          <ul style={{ listStyleType: "none" }}>
            <div id="titleSection">
              <h1 className={styles.title}>Name and describe your problem</h1>
              <h2 className={styles.subtitle}>
                It's great to provide examples, they allow the user to
                understand the problem
              </h2>
            </div>
            <li className={styles.marginBottom}>
              <label>Title</label>
              <TextField
                id="outlined-basic"
                variant="outlined"
                fullWidth
                value={title}
                onChange={updateTitle}
              />
            </li>
            <li>
              <label>Description</label>
              <div>{editor}</div>
            </li>
          </ul>
        </form>
      </div>
    </Grid>
  );
};

export default ProblemLeftPaneV1;

If you see anything else that isn't nice or can be improved, don't hestitate! I am new to React.