Actualmente, estoy tratando de crear una función de encendido/apagado para que aparezca o desaparezca Ckeditor5

debajo de mi código

 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;

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

cuando se hace clic en el botón llamado Editar y se cambia el verdadero nombre del estado esEditar, CKeditor se representa por duplicado