diff --git a/packages/container/src/components/FieldPluginContainer.tsx b/packages/container/src/components/FieldPluginContainer.tsx
index b3e1f9cf..d8bcdf1c 100644
--- a/packages/container/src/components/FieldPluginContainer.tsx
+++ b/packages/container/src/components/FieldPluginContainer.tsx
@@ -84,9 +84,8 @@ const useSandbox = (
       return undefined
     }
     // Omitting query parameters from the user-provided URL in a safe way
-    return `${fieldPluginURL.origin}${
-      fieldPluginURL.pathname
-    }?${urlSearchParamsFromPluginUrlParams(pluginParams)}`
+    return `${fieldPluginURL.origin}${fieldPluginURL.pathname
+      }?${urlSearchParamsFromPluginUrlParams(pluginParams)}`
   }, [fieldPluginURL, pluginParams])
   const [iframeKey, setIframeKey] = useState(0)
 
@@ -408,7 +407,7 @@ export const FieldPluginContainer: FunctionComponent = () => {
                 content,
                 isModalOpen,
                 options: recordFromFieldPluginOptions(schema.options),
-              } satisfies Partial<FieldPluginData>
+              } satisfies Partial<FieldPluginData<unknown>>
             }
           />
         </AccordionDetails>
diff --git a/packages/demo/src/components/FieldPluginDemo.tsx b/packages/demo/src/components/FieldPluginDemo.tsx
index 20c69fd5..1cf3fbe9 100644
--- a/packages/demo/src/components/FieldPluginDemo.tsx
+++ b/packages/demo/src/components/FieldPluginDemo.tsx
@@ -1,18 +1,24 @@
 import { FunctionComponent } from 'react'
 import { Box, Typography } from '@mui/material'
-import { useFieldPlugin } from '../useFieldPlugin'
 import { LoadingIcon, SquareErrorIcon } from '@storyblok/mui'
 import { FieldPluginActions, FieldPluginData } from '@storyblok/field-plugin'
+import { useFieldPlugin } from '@storyblok/field-plugin/react'
 import { ModalView } from './ModalView'
 import { NonModalView } from './NonModalView'
 
+const parseContent = (content: unknown) =>
+  typeof content === 'number' ? content : 0
+type Content = ReturnType<typeof parseContent>
+
 export type PluginComponent = FunctionComponent<{
-  data: FieldPluginData
-  actions: FieldPluginActions
+  data: FieldPluginData<Content>
+  actions: FieldPluginActions<Content>
 }>
 
 export const FieldPluginDemo: FunctionComponent = () => {
-  const { type, data, actions } = useFieldPlugin()
+  const { type, data, actions } = useFieldPlugin({
+    parseContent,
+  })
 
   if (type === 'loading') {
     return (
diff --git a/packages/demo/src/useFieldPlugin.ts b/packages/demo/src/useFieldPlugin.ts
deleted file mode 100644
index 1f177adf..00000000
--- a/packages/demo/src/useFieldPlugin.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createFieldPlugin, FieldPluginResponse } from '@storyblok/field-plugin'
-import { useEffect, useState } from 'react'
-
-type UseFieldPlugin = () => FieldPluginResponse
-
-export const useFieldPlugin: UseFieldPlugin = () => {
-  const [state, setState] = useState<FieldPluginResponse>(() => ({
-    type: 'loading',
-  }))
-
-  useEffect(() => {
-    return createFieldPlugin(setState)
-  }, [])
-
-  return state
-}
diff --git a/packages/demo/tsconfig.json b/packages/demo/tsconfig.json
index 153d66c8..7389aa5f 100644
--- a/packages/demo/tsconfig.json
+++ b/packages/demo/tsconfig.json
@@ -1,8 +1,11 @@
 {
   "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "moduleResolution": "Bundler"
+  },
   "include": [
     "src/**/*.ts",
     "src/**/*.d.ts",
-    "src/**/*.tsx",
+    "src/**/*.tsx"
   ]
 }
diff --git a/packages/demo/vite.config.ts b/packages/demo/vite.config.ts
index 8bd00502..061fd732 100644
--- a/packages/demo/vite.config.ts
+++ b/packages/demo/vite.config.ts
@@ -25,6 +25,13 @@ export default defineConfig({
               '../field-plugin/src/index.ts',
             ),
           },
+          {
+            find: /^@storyblok\/field-plugin\/react$/,
+            replacement: path.resolve(
+              __dirname,
+              '../field-plugin/helpers/react/src/index.ts',
+            ),
+          },
         ],
   },
   server: {