【react &NEXT.js】Warning: Each child in a list should have a unique "key" propでハマった話

こんにちは。エンジニア歴６ヶ月のざまです。
今回は、タイトルの通り、reactのkeyでハマった話です。
Next.jsでswiperライブラリを使用中に発生しました。

私みたいな初学者の方の参考になれれば幸いです。

該当コード

Carousels.tsx

 {menus.map((menu) => {
        return (
          <>
          <SwiperSlide key={menu.name}>
                <Image src={menu.src} w='100%' h={{base:'300',md:'600'}} alt={menu.alt}></Image>
                <Text>{menu.discription}</Text>
          </SwiperSlide>
          </>
        )
  })}

エラーメッセージ：Warning: Each child in a list should have a unique "key" prop

なぜ？？
keyをちゃんと付けているのに怒られてる。。。
色々ググった結果、フラグメントにもkeyを付けないといけないとのことでした。

参考記事
https://tech.motoki-watanabe.net/entry/2021/01/10/143047

今回の場合だと、フラグメントを付けないか、フラグメントにkeyを入れたら解決いたしました。

解決コード

Carousels.tsx

 {menus.map((menu) => {
        return (
          <React.Fragment key={menu.name}>
            <SwiperSlide key={menu.name}>
              <Image src={menu.src} w='100%' h={{base:'300',md:'600'}} alt={menu.alt}></Image>
              <Text>{menu.discription}</Text>
            </SwiperSlide>
          </React.Fragment>
        )
})}

話変わりますが、
個人的に、swiperはreact系だと向いていない気がしました。

Splide
https://ja.splidejs.com/integration/react-splide/
こちらの方がドキュメントも見やすくて、自分は好きです。