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

[Sarfinaa]

Before clicking-

After clicking-

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}

) } 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 it works fine but it then it doesn't show highlighting so please help me out.