I am getting error in my code, this is first time I am using react, previously I ran the code few days back it just run fine:

src/components/ResponseLengthButtonGroup/ResponseLengthButtonGroup.tsx:22:18 - error TS2786: 'Button' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.

22                 <Button id="Thorough" className={`${defaultValue == 3072? styles.buttonrightactive : styles.buttonright ?? ""}`} size="sm" value={3072} bsPrefix='ia'>{"Thorough"}</Button>
                    ~~~~~~

Below is my package.json:

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "watch": "tsc && vite build --watch"
  },
  "dependencies": {
    "@fluentui/react": "^8.110.7",
    "@fluentui/react-icons": "^2.0.195",
    "@react-spring/web": "^9.7.1",
    "dompurify": "^3.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.1",
    "@azure/storage-blob": "^12.13.0",
    "classnames": "^2.3.1",
    "nanoid": "3.3.4",
    "prop-types": "15.8.1",
    "react-bootstrap": "^2.7.4"
  },
  "devDependencies": {
    "@types/dompurify": "^2.4.0",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^4.2.1",
    "prettier": "^2.8.3",
    "typescript": "^4.9.3",
    "vite": "^5.0.10",
    "postcss-nesting": "^11.2.2"
  }
}

Please help me out if I am doing something wrong.