Typescriptでgroupタグを使用すると「プロパティ 'group' は型 'JSX.IntrinsicElements' に存在しません。」というエラーが表示される

実現したいこと

Typescriptでgroupタグを使用したいです。

発生している問題・分からないこと

Next.jsで制作しています。
page.jsでthree.jsをメインに設計していますので、Canvas内でgropタグを使用しています。
(確かgropタグで囲まないと画像が表示されない仕様なはずなので)
①しかし、groupタグがtsで使用できないような状態になってしまいます。
どのように対処すべきかが分からないのでお詳しい方教えて頂けますと嬉しいです。

②<Image key={index} url={img.url} scale={img.scale} position={img.position} />でもエラーが表示されます。①が原因かと思ったのですが、あまりエラーの意味が分からずという状況です。

エラーメッセージ

error
1src/app/Components/UI/Booksimage.tsx　で発生
2①〜gropuホバー時〜
3プロパティ 'group' は型 'JSX.IntrinsicElements' に存在しません。
4
5②
6〜scaleホバー時〜
7型 '[number, number, number]' を型 'number | [number, number] | undefined' に割り当てることはできません。
8  型 '[number, number, number]' を型 '[number, number]' に割り当てることはできません。
9    ソースには 3 個の要素がありますが、ターゲットで使用できるのは 2 個のみです。ts(2322)
10
11〜positionホバー時〜
12型 'number[]' を型 'Vector3 | undefined' に割り当てることはできません。
13  型 'number[]' を型 'Vector3 | [x: number, y: number, z: number] | readonly [x: number, y: number, z: number]' に割り当てることはできません。
14    型 'number[]' を型 '[x: number, y: number, z: number]' に割り当てることはできません。
15      ターゲットには 3 個の要素が必要ですが、ソースに指定する数はそれより少なくても構いません。ts(2322)
16

該当のソースコード

src/app/page.tsx
1"use client"
2import { Scroll, ScrollControls} from "@react-three/drei";
3import { Canvas } from "@react-three/fiber";
4import Booksimage from "./Components/UI/Booksimage"
5import { useEffect } from "react";
6import store from "./Redux/store";
7import AttentionBooksSection from "./Components/Section/AttentionBooksSection";
8import ChatSection from "./Components/Section/ChatSection";
9import About from "./Components/Section/About";
10import Title from "./Components/Section/Title";
11
12export default function Home() {
13
14  return (
15    
16    <div className="h-calc-header bg-green-200">
17      <Canvas className="w-full h-full">
18        <ScrollControls pages={4} damping={2}>
19          <Scroll>
20            <Booksimage />
21          </Scroll>
22          <Scroll html style={{ width: "100%" }}>
23            <section id="Top"><Title /></section>
24            <section id="About"><About /></section>
25            <section id="AttentionBooksSection"><AttentionBooksSection /></section>
26            <section id="ChatSection"><ChatSection /></section>
27          </Scroll>
28        </ScrollControls>
29      </Canvas>
30    </div>
31  );
32}

src/app/Components/UI/Booksimage.tsx
1import { Image } from "@react-three/drei";
2import { useThree } from "@react-three/fiber";
3const Booksimage = ()=> {
4  const {width,height} = useThree((state) => state.viewport);
5
6  // 画像縦横比
7  const aspectRatios = {
8    HadTheSameDreamAgain: 1600 / 2285,
9    ComradeGirlsHitTheTarget: 1295 / 1867,
10    NaruseGoesToTakeTheWorld: 680 / 1000,
11    T3000LeftToLive: 700 / 1000
12  };
13
14  const baseX = 0;
15  const baseY = 0;
16
17  const calculateScaleRatio = (widthPercentage: number, maxWidth: number, Ratio: number): [number, number, number] => {
18    const scaleWidth = Math.min(window.innerWidth * widthPercentage, maxWidth);
19    const scaleHeight = scaleWidth / Ratio;
20    return [scaleWidth, scaleHeight, 1];
21  };
22
23  const images = [
24    {
25      url: "/homeImages/NaruseGoesToTakeTheWorld.jpg",
26      scale: calculateScaleRatio(0.0025, 1.7, aspectRatios.NaruseGoesToTakeTheWorld),
27      position: [baseX + width * 0.09, baseY - height *0.005, 2.5],
28    },
29    {
30      url: "/homeImages/HadTheSameDreamAgain.jpg",
31      scale: calculateScaleRatio(0.0015, 0.9, aspectRatios.HadTheSameDreamAgain),
32      position: [baseX - width * 0.085, baseY - height *0.2, 3]
33    },
34    {
35      url: "/homeImages/3000CharactersLeftToLive.jpg",
36      scale: calculateScaleRatio(0.0035, 2, aspectRatios.T3000LeftToLive),
37      position: [baseX + width * 0.1, baseY -height * 0.35, 2],
38    },
39    {
40      url: "/homeImages/ComradeGirlsHitTheTarget.jpg",
41      scale: calculateScaleRatio(0.0025, 1.5, aspectRatios.ComradeGirlsHitTheTarget),
42      position: [baseX + width * 0.02, baseY - height * 0.6, 2.7],
43    },
44  ]
45
46  return (
47    <group>
48      {images.map((img, index) => (
49        <Image key={index} url={img.url} scale={img.scale} position={img.position} />
50      ))}
51    </group>
52  )
53}
54
55export default Booksimage;

tsconfig.json
1{
2"compilerOptions": {
3"target": "esnext",
4"module": "commonjs",
5"jsx": "preserve",
6"allowJs": true,
7"esModuleInterop": true,
8"forceConsistentCasingInFileNames": true,
9"strict": true,
10"noImplicitThis": true,
11"skipLibCheck": true,
12"lib": [
13"dom",
14"dom.iterable",
15"esnext"
16],
17"noEmit": true,
18"incremental": true,
19"moduleResolution": "node",
20"resolveJsonModule": true,
21"isolatedModules": true,
22"plugins": [
23{
24"name": "next"
25}
26]
27},
28"include": [
29"next-env.d.ts",
30".next/types/**/*.ts",
31"**/*.ts",
32"**/*.tsx"
33],
34"exclude": [
35"node_modules"
36]
37}