How to used React-transliterate in div contentEditable custom Component

How can add React Transliterate in div contentEditable.. Please help me

  import './App.css';
    import EditText from "./component/EditText"
    import Tools from "./component/tools"
    import Header from "./component/header"
    import Img from "./component/img"
    import './scss/style.scss';
    import MyImage from './home.png';
    import React, { useState } from "react";
    import { ReactTransliterate, Language } from "react-transliterate";
    const  App = () => {
      const [text, setText] = useState("");
      const [message, setMessage] = useState('');
      const handleKeyDown = event => {
        console.log(event.key);

    if (event.key === 'Enter') {
      event.preventDefault();
 console.log(message);
console.log(event.target.value)
console.log('User pressed Enter ');

     
    }
  };
 
  // const [lang, setLang] = useState<Language>("hi");
  return (
    <div className="App">
      <Header/>
      <div className='App_leftbar'>
        <ul>
          <li>
            <a href='#'><img src={MyImage} /></a>
          </li>
        </ul>
      </div>
      <div className='App_centerbar'>
        
        <div
       contentEditable="true"
        id="message"
        name="message"
        value={text}
        onChange={event => setText(event.target.value)}
        onKeyDown={handleKeyDown}
      />
 <ReactTransliterate
        renderComponent={(props) => <EditText onChange={event => setText(event.target.value)}
        onKeyDown={handleKeyDown} {...props} />}
        value={text}
        onChangeText={(text) => {
          setText(text);
        }}
        lang="hi"
        placeholder="Start typing here..."
        id="react-transliterate-input"
      /> 
        <Img src={MyImage}/>
      </div>
      <div className='App_rightbar'>
        <Tools />
      </div>
    </div>
  );
}

export default App;

I used this npm https://www.npmjs.com/package/react-transliterate?activeTab=readme

import React, { useState } from "react";

import { ReactTransliterate } from "react-transliterate";
import "react-transliterate/dist/index.css";

const App = () => {
  const [text, setText] = useState("");

  return (
    <ReactTransliterate
      value={text}
      onChangeText={(text) => {
        setText(text);
      }}
      lang="hi"
    />
  );
};

export default App;

React Transliterate uses the event.keycode property to detect keys. Here are some predefined keys you can use. Or, you can enter the integer codes for any other key you’d like to use as the trigger