[Las actualizaciones del estado pueden ser asíncronas.][1]

Entonces, en el siguiente código, LINE 1 es asíncrona y es por eso que se llama a LINE 2 con el valor anterior (no el nuevo):

```jsx
// Mejoré la función "setDrums" (pero este no fue el problema). "find" es mejor que "forEach" para este ejemplo.
const setDrums = (id) => {
  const found = drums.find((drum) => drum.id === id);
  if (found) {
    setsrc(found.src); // LINE 1
  }
};

const handleClick = (e) => {
  setDrums(e.target.id); 
  playActive() // LINE 2
};
```

Para resolver este problema, puede utilizar un [`useEffect`][2]:

```jsx
useEffect(() => {
  if (src) {
    playActive(src);
  }
}, [src]);

const handleClick = (e) => {
  setDrums(e.target.id);
};
```


  [1]: https://es.reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
  [2]: https://es.reactjs.org/docs/hooks-effect.html