currently, i'm trying to create on/Off function to appear or disappear Ckeditor5

below my code

import { Box, Button, styled, Typography } from "@mui/material";
import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const Description = ({ description }) => {
  const [isEdit, setIsEdit] = React.useState(false);
  const handlerOnOff = () => {
    setIsEdit((prev) => !prev);
  };

  return (
    <Root>
      <Box>
        <Typography component="span">Description</Typography>
        <Button onClick={handlerOnOff}>Edit</Button>
      </Box>
      <Box>
        {isEdit ? (
          <div>
            <CKEditor
              config={{
                toolbar: [
                  "heading",
                  "|",
                  "bold",
                  "italic",
                  "bulletedList",
                  "numberedList",
                  "blockQuote"
                ]
              }}
              data={description}
              editor={ClassicEditor}
            />
          </div>
        ) : (
          <>{description}</>
        )}
      </Box>
    </Root>
  );
};

const Root = styled("div")(({ theme }) => ({
  marginBottom: "60px",
  "& .ck-content": {
    minHeight: "200px"
  }
}));

export default Description;

and codesandbox https://codesandbox.io/embed/suspicious-mahavira-eoeip1?fontsize=14&hidenavigation=1&theme=dark

when click button named Edit and changed true of state name isEdit, Ckeditor is rendered in duplicate