How is state being updated here?

The function

function handleChange(event) {
        const {name, value, type, checked} = event.target
        setFormData(prevFormData => ({
            ...prevFormData,
            [name]: type === "checkbox" ? checked : value
        }))
    }

updates the state of inputs, so for example email gets updated to value. But value is set to formData.email which is set to an empty string. So where is the value being derived from?

Here’s the link https://codepen.io/Montinyek/pen/ExRoEyR

Right, it starts out as an empty string, because that is what is in state. That is the initial state.

When you enter data in that field, say the letter “m”, the component calls handleChange. It calls setFormData which updates state. So, then formData.email equals “m”. State has changed so a render is triggered. When it gets to value={formData.email}, that now is “m” so that is what will be displayed.