Why is setPeople executed after setFirstName, setEmail and after the event handler is exited?

const [firstName, setFirstName] = useState('');
const [email, setEmail] = useState('');
const [people, setPeople] = useState([]);

const handleSubmit = (e) => {
  e.preventDefault(); // prevent the browser from refreshing the page the moment the form is submitted
  if (firstName && email) {
    const person = { id: new Date().getTime().toString(), firstName, email };

    console.log('before');
    setPeople((people) => {
      console.log('inside');
      return [...people, person]; // append person to the array of people
    });
    console.log('after');
    setFirstName('');  // clear the input fields after clicking submit
    setEmail('');
  }
  console.log('exiting handler');
}

/*
outputs:
  before
  after
  exiting handler
  inside
*/