Why is destructuring and concatenation leaving different types of undefined in array?

Question

Here is my code

console.log(this.state.pins);
this.setState({ pins: [...this.state.pins, ...block] });
console.log(this.state.pins);

Here is what we see in the console...

More experementation... When I set my code to this.

this.setState({pins: this.state.pins.concat(block)});

So here I am using a map function.

{pins.map(pin => <PinnedBlock blockId={pin} /> )}

When I use the above map function on this array:

this.setState({ pins: [...this.state.pins, ...block] }); 

I get a <PinnedBlock blockId={pin} /> where pin is undefined.

When I use the above map function on this array:

this.setState({pins: this.state.pins.concat(block)});

I do not get an output corresponding to undefined.

Can someone explain help me understand what is happening here?