html, java script, end point

pytanie zadane 28 czerwca 2022 w JavaScript przez little_Mario Nowicjusz (140 p.)

Proszę o wskazówkę co robię nie tak.

Napisałem w HTML prostą stronkę, która poprzez GET ma pobierać fakty o zwierzętach. Jest możliwość wyboru zwierzęcia i ilość faktów. I tu jest problem. Przy wyborze ilości, tj. amount większe niż 1 wyskakuje "undefined". Dlaczego ? HTML i javascript poniżej:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ciekawostki o zwierzętach</title>

    <script src="test.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<select id="animalType">
    <option value="cat">Kot</option>
    <option value="dog">Pies</option>
    <option value="horse">Kon</option>
    <option value="snail">Slimak</option>
</select>

<select id="number">
    <option value="1">Jeden</option>
    <option value="2">Dwa</option>
    <option value="3">Trzy</option>
    <option value="4">Cztery</option>
</select>

<button onclick="getFact()">Pobierz dane</button>

<div id="fact"></div>

</body>
</html>

function getFact() {


    const animalType = document.getElementById("animalType").value;
    const number = document.getElementById("number").value;


    axios.get("https://cat-fact.herokuapp.com/facts/random?animal_type=" + animalType + "&amount=" + number).then(response => {
        const fact = response.data.text;
        document.getElementById("fact").innerText = fact;
    });
}