Whenever i click on slate editor it shows error after adding class="language-javascript" to code block

[Sarfinaa]

Before clicking-

After clicking-

I don't know what is the problem please help me out.
My Code-

import React, { useEffect, useMemo, useState,useCallback } from 'react'
import { createEditor,Transforms,Editor,Text } from 'slate'
import { Slate, Editable ,withReact} from 'slate-react'
import {initialValue} from './SlateInitialValue';
import { withHistory } from 'slate-history'
import Prism from 'prismjs';
import Element from "./Element";
import 'prismjs/plugins/keep-markup/prism-keep-markup.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
function Input() {
  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
const [value, setValue] = useState(initialValue);
  const renderElement = useCallback(elProps => <Element {...elProps} />, []);

  useEffect(() => {
    console.log(Prism.plugins)
    // Disable this to see that Slate returns properly formatted code
    Prism.plugins.KeepMarkup = true;
    Prism.plugins.LineNumbers = true;
  Prism.highlightAll();
  }, []);

  return (
    <>
    <Slate
    editor={editor}
  
    value={value}
    onChange={newVal=>{
      setValue(newVal);
    }}
  >
    <Editable 
    placeholder="Type something"
    style={{
      backgroundColor:'#fafafa',
      maxWidth:'800px',
      minHeight:'150px',
      borderRadius:'10px'
    }}
    renderElement={renderElement}
 </Slate>
  </>
  )
}
export default Input

And my Element,js file code-

import React from 'react';
import 'prismjs/themes/prism.css'
const Element = ({ attributes, children, element }) => {
  switch (element.type) {
     case 'code-line':
      return <div  {...attributes}>{children}</div>;
    case 'code-block':
      return (
        <pre {...attributes}>
          <code className="language-javascript">{children}</code>
        </pre>
      );
    default:
      return <div {...attributes}>{children}</div>;
  }
};
export default Element;

Please help me out i have searched whole internet and i am not getting why its happening whenever i remove the class from Element.js <code> it works fine but it then it doesn't show highlighting so please help me out.

[RunDevelopment]

(From your error message.)

This react-editor.ts one of your files?

The problem seems to be that ELEMENT_TO_NODE is a Map. Prism's Keep Markup plugin will only keep the markup structure but not the DOM nodes themselves. So after Prism highlights your code, all DOM nodes used as keys in ELEMENT_TO_NODE won't be part of the DOM anymore.

[Sarfinaa]

No react-editor.ts is not present in my files. Is there any solution for this problem ?

[RunDevelopment]

Ok, it's part of slate.

But in this case, it's no wonder that your code doesn't work. Slate essentially assumes that nothing changes the DOM nodes of the Slate element. However, Prism completely replaces the DOM nodes created by Slate.

You will probably need to write a Slate plugin or use an existing one.

[Sarfinaa]

I dont know how to write slate plugin but thank you sir for the help .