[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);
};
```

**Editar:**

También le recomendaría que cambie `useSound` (custom react hook) a algo como esto.

**useSound:**
```jsx
const useSound = (vol) => {
  const playActive = (src) => {
    // ...
  };
  return [playActive];
};
```
Y utilícelo así:

**Drumbox:**
```jsx
// ...
const [playActive] = useSound({ volume: 0.25 });
// ...
```

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