TW-Elements React Components trying to typescript in a JSX file throwing error

Question

https://tw-elements.com/docs/react/components/carousel/

In their example code they say that they are using a JSX file but when I try to do so it throws an error with VSCode saying that "Type annotations can only be used in TypeScript files." and a runtime syntax error saying ": expected {"

import React from "react";
import { TECarousel, TECarouselItem } from "tw-elements-react";

export default function CarouselBasicExample(): JSX.Element {
  return (
...

I have set up the tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    "./node_modules/tw-elements-react/dist/js/**/*.js",
  ],
  theme: {
  },
  plugins: [require("tw-elements-react/dist/plugin.cjs")],
}

and followed the docs on the installation. Am I missing something?

I tried to use the Tailwind-Elements React docs for a carousel component but can't get use the code as shown in their docs without throwing a jsx/typescript error. I have tried changing the file type and removing the type to no avail.