Live preview wont work with React components: **Error: Minified React error #525;**

I am trying to create a live preview for one of my collections but I keep getting **Error: Minified React error #525;**

I have tried, removing the `--external react, react-dom` flags from the script and the `import React from 'react'` but then I get the error
**React is not defined**

Below is my setup and dependencies.

`"cms:build": "tsup src/cms-preview/index.js --format iife --out-dir public/admin --minify --loader .js=jsx --external react,react-dom",`

```

Content Manager

```

```
import PagePreview from './PagePreview'
const CMS = window.CMS

CMS.registerPreviewTemplate('pages', PagePreview)
```

`"react": "^18.2.0",
"react-dom": "^18.2.0",
"next": "^14.2.5",`

```
import React from 'react'

import Banner from '../components/success_story/Banner'
import TextSection from '../components/success_story/TextSection'
import ImageSection from '../components/success_story/ImageSection'
import LargeTextBlock from '../components/success_story/LargeTextBlock'
import Testimonial from '../components/success_story/SuccessStoryTestimonial'
import ProblemsAndSolutions from '../components/success_story/ProblemsAndSolutions'
import Timeline from '../components/success_story/Timeline'
import Booking from '../components/success_story/Booking'

const componentMap = {
Banner,
TextSection,
ImageSection,
LargeTextBlock,
Testimonial,
ProblemsAndSolutions,
Timeline,
Booking
}

const PagePreview = ({ entry }) => {
const data = entry.getIn(['data']).toJS()
const sections = data.sections || []

return (

export default PagePreview
```