getting the following error: "TypeError: Cannot read property 'map' of undefine"

const select = document.getElementById('breeds');
const card = document.querySelector('.card');
const form = document.querySelector('form');

// ------------------------------------------
//  FETCH FUNCTIONS
// ------------------------------------------
fetch('https://dog.ceo/api/breeds/list')
    .then(response => response.json)
    .then(data => generateOptions(data.message))

fetch("https://dog.ceo/api/breeds/image/random")
    .then(response => response.json())
    .then(data => generateImage(data.message))


// ------------------------------------------
//  HELPER FUNCTIONS
// ------------------------------------------
function generateOptions(data) {
    const options = data.map(item => `
    <option value='${item}'>${item}</option>
    `);
    select.innerHTML = options;
}

function generateImage(data) {
    const html = `
  <img src='${data}' alt>
  <p>Click to view image of ${select.value}s</p>
  `;
    card.innerHTML = html;
}

app.js:21 Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
    at generateOptions (app.js:21)
    at app.js:10