ReactのuseEffectの無限ループを解決したい

実現したいこと

ReactのuseEffectの無限ループを解決したいです。そのために何をするべきかをご教示いただけますと幸いです。

前提

犬の画像が表示されるアプリケーションに、「犬種をドロップダウンで選択して、選択した犬種の画像をリスト表示する」という機能を追加しようとしています。

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

ブラウザ上に以下のように表示されます

TypeError Failed to fetch

該当のソースコード

App.js

1// DO NOT DELETE 2 3import * as React from 'react' 4import './App.css' 5import { Header } from './Header.js' 6import { Description } from './Description.js' 7import { DogListContainer } from './DogListContainer' 8 9/** 10 * 11 * @type {React.FC} 12 */ 13 14export const App = () => { 15 return ( 16 <div> 17 <Header title={'Dog App'} /> 18 <Description description={'犬の画像を集めたサイトです'} text={'更新'} /> 19 <DogListContainer /> 20 </div> 21 ) 22} 23 24

DogListContainer

1// DO NOT DELETE 2import * as React from 'react' 3import { useState } from 'react' 4import { useEffect } from 'react' 5 6export const DogListContainer = prpps => { 7 const [breeds, setBreeds] = useState([]) 8 9 useEffect(() => { 10 fetch('https://https://dog.ceo/api/breeds/list/all') 11 .then(ress => ress.json()) 12 .then(mess => { 13 const list = mess.message 14 setBreeds(keys(list)) 15 }) 16 }, [breeds]) 17 18 return ( 19 <select name="breed"> 20 {breeds.map(breed => ( 21 <option key={breed} value={breed}> 22 {breed} 23 </option> 24 ))} 25 </select> 26 ) 27} 28 29

試したこと

第二引数に[]や[breeds]を入れたり、ネットで依存関係などについてリサーチはしたのですが、解決にはいたりませんでした。

どうぞよろしくお願いいたします。