diff --git a/packages/sui-js/src/react/index.js b/packages/sui-js/src/react/index.js
index 50a89b1f8..d0d3d4072 100644
--- a/packages/sui-js/src/react/index.js
+++ b/packages/sui-js/src/react/index.js
@@ -1,4 +1,46 @@
-export {default as htmlStringToReactElement} from 'htmr'
+import htmr from 'htmr'
+
+// This is a list of all the elements that should not be allowed to be rendered as they pose a security risk.
+// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+// If you want to allow one of these elements, you can add it to the `transform` object in the `options`.
+export const DANGEROUS_TRANSFORMS = {
+  area: () => null,
+  audio: () => null,
+  base: () => null,
+  canvas: () => null,
+  embed: () => null,
+  form: () => null,
+  frame: () => null,
+  frameset: () => null,
+  head: () => null,
+  html: () => null,
+  iframe: () => null,
+  img: () => null,
+  link: () => null,
+  map: () => null,
+  meta: () => null,
+  noscript: () => null,
+  object: () => null,
+  picture: () => null,
+  portal: () => null,
+  script: () => null,
+  slot: () => null,
+  source: () => null,
+  style: () => null,
+  template: () => null,
+  title: () => null,
+  track: () => null,
+  video: () => null
+}
+
+export const htmlStringToReactElement = (string, options) =>
+  htmr(string, {
+    ...options,
+    transform: {
+      ...DANGEROUS_TRANSFORMS,
+      ...options?.transform
+    }
+  })
 
 const isReactRefObj = target => {
   if (target && typeof target === 'object') {