React Hooks: contentEditable not updating

You can use the react-contenteditable component which I think will do what you are looking for. The following code is your app with it implemented:

import React, { useState } from "react";
import ContentEditable from "react-contenteditable";
import "./styles.css";

function transformation(data) {
  const test = `${data} It works`;
  return test;
}

export default function App() {
  const [value, setValue] = useState("");

  const handleChanges = (event) => {
    setValue(event.target.value);
  };

  return (
    <ContentEditable
      style={{ border: "2px solid black" }}
      innerRef={this.contentEditable}
      onChange={handleChanges}
      html={transformation(value)}
    />
  );
}

You can have a play around on the following: https://codesandbox.io/s/awesome-breeze-6rmih?file=/src/App.js:0-549

And you can read the component's documentation here: https://www.npmjs.com/package/react-contenteditable