app.tsx 질문입니다

// import "../styles/globals.css";

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
import type { AppProps } from "next/app";

export default function App({ Component }: AppProps): JSX.Element {
  const client = new ApolloClient({
    uri: "http://backend-example.codebootcamp.co.kr/graphql",
    cache: new InMemoryCache(), //컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장해 놓기 => 나중에 더 자세히 알아보기
  });
  //graphql 셋팅

  return (
    <div>
      <div>
        ============여기는 APP.js 컴포넌트 시작부분 입니다==============
      </div>
      <ApolloProvider client={client}>
        <Component />
      </ApolloProvider>
      <div>============여기는 APP.js입니다==============</div>
    </div>
  );
}

코드이고 Component에 빨간줄이 그어져서 마우스를 올려보니

'Component'은(는) JSX 구성 요소로 사용할 수 없습니다.
Its type 'NextComponentType<NextPageContext, any, {}>' is not a valid JSX element type.
'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' 형식은 'ElementType' 형식에 할당할 수 없습니다.
'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' 형식은 'new (props: any) => Component<any, any, any>' 형식에 할당할 수 없습니다.
구문 시그니처 반환 형식 'Component<{}, any, any>' 및 'Component<any, any, any>'이(가) 호환되지 않습니다.
'render()'에서 반환되는 형식은 해당 형식 간에 호환되지 않습니다.
'React.ReactNode' 형식은 'import("c:/Users/82109/OneDrive/\uBC14\uD0D5 \uD654\uBA74/codecamp-frontend-mentee/class/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode' 형식에 할당할 수 없습니다.
'{}' 형식은 'ReactNode' 형식에 할당할 수 없습니다.ts(2786)

(parameter) Component: NextComponentType<NextPageContext, any, {}>

라고 나오는데 실행해도 크게 문제는 없는거 같은데 ts로 바꾸면서 타입을 설정해주지 않아서 나오는 warning같은 느낌인건지 궁굼해서 질문 남깁니다.

항상 좋은강의 감사드립니다!

{
  "name": "class",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate": "graphql-codegen"
  },
  "dependencies": {
    "@apollo/client": "^3.7.13",
    "@emotion/react": "^11.10.8",
    "@emotion/styled": "^11.10.8",
    "@material-ui/core": "^4.12.4",
    "antd": "^5.4.6",
    "axios": "^1.4.0",
    "graphql": "^16.6.0",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "ts-node": "^10.9.1"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^4.0.1",
    "@graphql-codegen/typescript": "^4.0.0",
    "@types/node": "17.0.2",
    "@types/react": "17.0.2",
    "@typescript-eslint/eslint-plugin": "^5.50.0",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-standard-with-typescript": "^35.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "2.8.8",
    "typescript": "*"
  }
}