どのような型を付与したらいいのかわからない

前提・実現したいこと

Next.js、TypeScript初心者です。

バイト先のドリンク管理アプリをNext.js,TypeScript,microCMSで開発しております。

発生している問題・エラーメッセージ

pagesディレクトリからcomponentsディレクトリにpropsを渡したいのですが、dataの型がうまくいきません、、、

エラー文は

プロパティ'contents'は型'Data'にありませんが、型'{contents:Data[]}'では必須です。
index.tsx[18, 5]: 'contents'はここで宣言されています。
index.tsx[17, 3]: 予期された型は、型'IntrinsicAttributes & Props & { children?: ReactNode;}'に対してここで宣言されたプロパティ'data'から取得されています。

になります。

該当のソースコード

TypeScript(Next.js) (src/pages/wine/red/twoRank/index.tsx)

import { GetStaticProps } from "next";
import { WineLists } from "src/components/WineLists";
import { client } from "src/libs/client";
import { NextPage } from "next";

type Data = {
  name: string;
  origin: string;
  variety: string;
  taste: string;
  rank: string;
  producer?: string;
  image?: string;
  remarks?: string;
};

type SampleImage = {
  wineImage: {
    url: string;
  };
};

type Props = {
  data: Data;
  sampleImage: SampleImage;
};

export const getStaticProps: GetStaticProps<Props> = async () => {
  const data = await client.get({
    endpoint: `redwine`,
  });

  const sampleImage = await client.get({
    endpoint: "wineimage",
  });

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      data,
      sampleImage,
    },
  };
};

const TwoRank: NextPage<Props> = (props) => {
  console.log(props.data);
  
  return (
    <WineLists
      keyRank="2ランク"
      data={props.data}
      sampleImage={props.sampleImage.wineImage.url}
    />
  );
};

export default TwoRank;

TypeScript(Next.js) (src/components/WineLists/index.tsx)

type Data = {
  id: string;
  name: string;
  origin: string;
  variety: string;
  taste: string;
  rank: string;
  producer?: string;
  image?: {
    url: string;
  };
  remarks?: string;
};

type Props = {
  keyRank: string;
  data: {
    contents: Data[];
  };
  sampleImage: string;
};

export const WineLists: React.FC<Props> = (props) => {
  const rankData = props.data.contents?.filter(
    (data: Data) => data.rank[0] === props.keyRank
  );

  return (
    <div className="h-screen">
      {rankData?.map((data: Data) => (
        <div
          className="h-1/3 flex justify-around items-center bg-blue-100 mb-6"
          key={data.id}
        >
          <div>
            <img
              className="w-60 h-60 object-cover rounded-lg"
              src={data?.image ? data.image.url : props.sampleImage}
              alt="ワインの画像です"
            />
          </div>
          <dl className="flex flex-wrap tracking-wide w-1/2 font-mono bg-yellow-50 rounded-lg p-7 text-gray-700">
            <dt className="leading-relaxed flex w-3/12 font-bold">
              ワイン名 :{" "}
            </dt>
            <dd className="leading-relaxed w-9/12">{data.name}</dd>
            <dt className="leading-relaxed flex w-3/12 font-bold">品種 : </dt>
            <dd className="leading-relaxed w-9/12">{data.variety}</dd>
            <dt className="leading-relaxed flex w-3/12 font-bold">産地 : </dt>
            <dd className="leading-relaxed w-9/12">{data.origin}</dd>
            <dt className="leading-relaxed flex w-3/12 font-bold">味わい : </dt>
            <dd className="leading-relaxed w-9/12">{data.taste}</dd>
            {data.producer ? (
              <>
                <dt className="flex w-3/12 font-bold">生産者 : </dt>
                <dd className="w-9/12">{data.producer}</dd>
              </>
            ) : null}
            {data.remarks ? (
              <>
                <dt className="flex w-3/12 font-bold">備考 : </dt>
                <dd className="w-9/12">{data.remarks}</dd>
              </>
            ) : null}
          </dl>
        </div>
      ))}
    </div>
  );
};