React hooks - setState does not update state properties

[climberbrad]

I've made it to the useEffects portion of the course. When implementing useEffect() I am not seeing the values of animal, location or breed passed to the url here

I added a console.log in the code below and the value of animal is always empty

async function requestPets() {
        console.log(`animal=${animal}`)
        const url = `http://pets-v2.dev-apis.com/pets?animal=${animal}&location=${location}&breed=${breed}`
        console.log(url)
        const res = await fetch(url);
        const json = await res.json();

        setPets(json.pets);
    }

I am using

npm 7.15.1
node v16.3.0

What am I doing wrong?

[climberbrad]

Passing animal to useEffect() allows it to populate correctly but I would love to know how to update only when you hit the submit button.

useEffect(() => {
        requestPets();
    }, [animal])  //eslint-disable-line react-hooks/exhaustive-deps

[climberbrad]

Looks like i just needed to make it a little further in the tutorial :)