I used code-block module in react quill but I want to add highlight to

 tag with inner code tag. I want to add class for different programming language, but Just after I am entering something in my ReactQuill component, It is getting vanished. Basically I tried different ways but it's not working...

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
hljs.configure({
  languages: ['javascript', 'python', 'java', 'cpp', 'c', 'html', 'css']
});
export default function App() {
  const [value, setValue] = useState('');
  const modules = {
    syntax: {
      highlight: (text) => hljs.highlightAuto(text).value
    },
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
      ['link', 'image', 'code-block'],
      ['clean']
    ]
  };
  const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image', 'code-block'
  ];
  return (
    <>
      <ReactQuill theme="snow" value={value} modules={modules} formats={formats} onChange={setValue} />
      <button onClick={() => { console.log(value) }}>show highlighting</button>
    </>
  );
}```