Hooks only allowing selection of first animal

[maniland]

Firstly please forgive my React ignorance

I am following the course and have come to the hooks section where we create a select for the animals, I have the Array of animals and the select within the animal label, where the entries are mapped to an option.

When I run the code using npm run dev I am seeing that I can only ever select the first entry in the array to empty string. I am sure I have done something wrong but after hours of looking I'm not sure what it is.

I have included the code I have in the hope it will be a "Oh you haven't done that!" moment.

Thanks for the course I am enjoying it 👍

import { useState } from "react";

const ANIMALS = ["bird", "cat", "dog", "rabbit", "reptile"];

const SearchParams = () => {
  const [location, setlocation] = useState("London");
  const [animal, setAnimal] = useState("");

  return (
    <div className="search-params">
      <form>
        <label htmlFor="location">
          Location
          <input
            id="location"
            onChange={(e) => setlocation(e.target.value)}
            value={location}
            placeholder="Location"
          />
        </label>
        <label htmlFor="animal">
          Animal
          <select
            id="animal"
            value={animal}
            onChange={(e) => setAnimal(e.target.value)}
            onBlur={(e) => setAnimal(e.target.value)}
          >
            <option />
            {ANIMALS.map((animal) => (
              <option value="animal" key={animal}>
                {animal}
              </option>
            ))}
          </select>
        </label>
        <button>Submit</button>
      </form>
    </div>
  );
};

export default SearchParams;

[maniland]

closing as I'm an idiot <option value="animal" key={animal}> !== <option value={animal} key={animal}>