Cannot build production - Type error: 'Flickity' cannot be used as a JSX component. Its instance type 'Flickity' is not a valid JSX element

Usingn Nextjs cannot build production:

▲ Next.js 14.0.4

package.json: { "private": true, "scripts": { "dev": "next", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-brands-svg-icons": "^6.5.1", "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@next/third-parties": "^14.0.4", "@types/node": "^18.6.3", "@types/nodemailer": "^6.4.14", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "bootstrap": "^5.3.2", "classnames": "^2.3.1", "date-fns": "^2.28.0", "flickity": "^2.3.0", "framer-motion": "^10.18.0", "mmenu-js": "^9.3.0", "next": "latest", "nodemailer": "^6.9.7", "react": "^18.2.0", "react-bootstrap": "^2.9.1", "react-dom": "^18.2.0", "react-flickity-component": "^4.0.7", "react-hook-form": "^7.49.0", "react-lite-youtube-embed": "^2.4.0", "react-select-country-list": "^2.2.3", "sass": "^1.69.7", "typescript": "^4.7.4" }, "devDependencies": { "autoprefixer": "10.4.7", "postcss": "8.4.31" }, "resolutions": { "@types/react": "17.0.30" } }

component:

`
import { Fragment } from 'react'
import Flickity from 'react-flickity-component'

const flickityOptions = {
  initialIndex: 0,
  contain: true,
  cellAlign: 'left',
  prevNextButtons: false,
  pageDots: false,
  static: true
}

const FlickityHero = ({ hero }) => {

  const { heroPhotos, heroTitle, heroSubtitle } = hero

  return (
    <>
      {heroPhotos &&
        <section id="oa-banner" className="position-relative">

          <div className="hero-slides">
            <Flickity
              className={''} // default ''
              elementType={'div'} // default 'div'
              options={flickityOptions} // takes flickity options {}
              disableImagesLoaded={false} // default false
              reloadOnUpdate // default false
              static // default false
            >
              {heroPhotos.map((photo, index) => (
                <Fragment key={index}>
                  <div
                    className="oa-slide"
                    style={{
                      backgroundImage: `url("${photo?.sourceUrl}")`,
                      backgroundPosition: 'right 30% center',
                      backgroundSize: 'cover',
                      backgroundRepeat: 'no-repeat',
                      position: 'absolute',
                      left: 0,
                    }}
                    key={index}
                  >

                    <div className="container h-100 d-flex align-items-center">
                      <div className="row">
                        <div className="col-12">
                          <div className="text-white">
                            <div className="title-banner mb-1 p-0">
                              <h2
                                className="h1 pb-0 mb-0 text-uppercase"
                                dangerouslySetInnerHTML={{ __html: heroTitle }} />
                            </div>
                          </div>
                          <div className="fs-20 text-white" dangerouslySetInnerHTML={{ __html: heroSubtitle }} />

                        </div>
                      </div>

                    </div>
                  </div>
                </Fragment>
              ))}
            </Flickity>
          </div>

        </section >
      }
    </>
  )
}

export default FlickityHero

npm run build:

` npm run build

build next build

Linting and checking validity of types .Failed to compile.

./components/flickity-hero.tsx:23:14 Type error: 'Flickity' cannot be used as a JSX component. Its instance type 'Flickity' is not a valid JSX element.

21 | 22 |

23 | <Flickity | ^ 24 | className={''} // default '' 25 | elementType={'div'} // default 'div' 26 | options={flickityOptions} // takes flickity options {} `

Tried with the simple example provided here and same result.

thanks in advance.

yaodingyd / react-flickity-component

Cannot build production - Type error: 'Flickity' cannot be used as a JSX component. Its instance type 'Flickity' is not a valid JSX element #153