diff --git a/app/components/ContentEditable.tsx b/app/components/ContentEditable.tsx
index 21ad646d31c8..1ec8e4d58ec3 100644
--- a/app/components/ContentEditable.tsx
+++ b/app/components/ContentEditable.tsx
@@ -42,7 +42,7 @@ const ContentEditable = React.forwardRef(
   ) => {
     const innerRef = React.useRef<HTMLSpanElement>(null);
     const ref = forwardedRef || innerRef;
-    const [innerHTML, setInnerHTML] = React.useState<string>(value);
+    const [innerValue, setInnerValue] = React.useState<string>(value);
     const lastValue = React.useRef("");
 
     const wrappedEvent = (
@@ -75,7 +75,7 @@ const ContentEditable = React.forwardRef(
 
     React.useEffect(() => {
       if (value !== ref.current?.innerText) {
-        setInnerHTML(value);
+        setInnerValue(value);
       }
     }, [value, ref]);
 
@@ -88,12 +88,12 @@ const ContentEditable = React.forwardRef(
           onBlur={wrappedEvent(onBlur)}
           onKeyDown={wrappedEvent(onKeyDown)}
           data-placeholder={placeholder}
+          suppressContentEditableWarning
           role="textbox"
-          dangerouslySetInnerHTML={{
-            __html: innerHTML,
-          }}
           {...rest}
-        />
+        >
+          {innerValue}
+        </Content>
         {children}
       </div>
     );