Unable to understand for…in in JavaScript objects

I have below spaceship object in JavaScript and then nested objects as well.

let spaceship = {
    crew: {
    captain: { 
        name: 'Lily'
       },
    'chief officer': { 
        name: 'Dan', 
        },
    medic: { 
        name: 'Clementine', 
        },
    translator: {
        name: 'Shauna', 
        }
    }
}; 

I am trying to use for…in loop but:

for(let crewMember in spaceship.crew){
  console.log(`${crewMember}:${crewMember.name}`)
}

displays output as:

captain:undefined
chief officer:undefined
medic:undefined
translator:undefined

Whereas I expect:

captain:Lily
chief Dan
medic:Clementine
translator:Shauna

To achieve the above result, I can do this instead

console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`)

But I am unable to understand why I can’t achieve the same using former code, i.e.

console.log(`${crewMember}:${crewMember.name}`)