Duplicate the input text in the underlay div.

src/Editor.css

@@ -10,6 +10,19 @@
   flex-basis: 0;
   position: relative;
   background: white;
+  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
+    "DejaVu Sans Mono", monospace;
+  font-weight: normal;
+  font-size: 3rem;
+  text-align: initial;
+}
+
+.Editor-textarea,
+.Editor-underlay {
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  padding: 5px;
 }
 
 .Editor-textarea {
@@ -21,6 +34,7 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  border: none;
   background-color: transparent;
 }
 
@@ -34,4 +48,5 @@
   height: 100%;
   pointer-events: none;
   /* background: orange; */
+  /* color: purple; */
 }

src/Editor.tsx

@@ -1,15 +1,21 @@
+import React, { useState } from 'react';
 import './Editor.css';
 
-function Editor() {
+function Editor({
+  defaultValue = "I have a text value."
+}) {
   function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
     console.log(event.target.value);
+    setValue(event.target.value);
   }
 
+  const [value, setValue] = useState(defaultValue);
+
   return (
     <div className="Editor">
       <div className="Editor-textwrapper">
-        <textarea onChange={handleChange} className="Editor-textarea">I have text</textarea>
+        <textarea onChange={handleChange} className="Editor-textarea" value={value} />
-        <div className="Editor-underlay"></div>
+        <div className="Editor-underlay">{value}</div>
       </div>
       <div className="Editor-ast"></div>
     </div>