犬種をドロップダウンで選択して、選択した犬種の画像をリスト表示する」機能を出したいがエラーが出る。

DogListContainer.js

import React, { useEffect, useState } from 'react' // DO NOT DELETE import { BreedsSelect } from './BreedsSelect' export const DogListContainer = () => { const [breeds, setBreeds] = useState(null) useEffect(() => { const fetchAll = async () => { try { const data = await fetch('https://dog.ceo/api/breeds/list/all') if (!data.ok) throw new Error('error') return data } catch (error) { return error } } fetchAll() .then(res => { res.json() }) .then(data => { setBreeds(data.message) }) }, []) return <BreedsSelect breeds={breeds} /> }

BreedsSelect

import React, { useState } from 'react' export const BreedsSelect = props => { const [selectedBreed, setSelectedBreed] = useState(null) const options = props.breeds return ( <div> <select value={selectedBreed} onChange={e => setSelectedBreed(e.target.value)} > {Object.keys(options).map(breed => ( <option>{breed}</option> ))} </select> </div> ) }

犬種をドロップダウンで選択して、選択した犬種の画像をリスト表示する」機能を出したいです。
しかしながらこのようなエラーが出ます。
TypeError
Cannot convert undefined or null to object
どの様に解消すればいいでしょうか？