How to declare an object with whose name is the value of another object in React? Possibly with JSX?

In my onSubmit function as seen below I’m trying to pass values.pet as an object with number as it’s prop. I then plan on pushing the object into my array of objects that is pet.

 onSubmit={(values, actions) => {
                let freshPet = {
                    {values.pet}: {
                        number: 1
                    }
                }
                   setPets([...pets, freshPet ])
                 }
                }

This is pet’s variable initially created with setPets

{
    cat: {
        number: 1 
    }, 
    dog: {
        number: 1
    }
}

Wrapping values.pet creates a series of errors so I imagine I attempted to utilize jsx wrong. So how would I go about getting a object whose name would be the output of values.pet. The value I’m expecting being a single word string such as “fish” for example.

The link to my entire js file can be found here.