bottle data tags are imgs

packages/react-components/src/components/bottle-data.tsx

@@ -1,5 +1,5 @@
 import { noUUIDRandom } from '@giphy/js-util'
-import React, { useRef, useLayoutEffect } from 'react'
+import React from 'react'
 
 function processTag(tag: string) {
     tag = tag.replace(`%%CACHEBUSTER%%`, noUUIDRandom())
@@ -11,28 +11,8 @@ function processTag(tag: string) {
     }
     return tag
 }
-/**
- * Execute a script tag in a React component.
- * https://macarthur.me/posts/script-tags-in-react/
- */
 function BottleData({ src }: { src: string }) {
-    const elRef = useRef<HTMLDivElement>(null)
-
-    useLayoutEffect(() => {
-        if (!elRef.current) return
-        const range = document.createRange()
-        range.selectNode(elRef.current)
-        const documentFragment = range.createContextualFragment(
-            `<script src="${processTag(src)}" type="text/javascript"></script>`
-        )
-
-        // Inject the markup, triggering a re-run!
-        elRef.current.innerHTML = ''
-        elRef.current.append(documentFragment)
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
-
-    return <div ref={elRef} dangerouslySetInnerHTML={{ __html: src }}></div>
+    return <img src={processTag(src)} />
 }
 
 export default BottleData