Using map() inside a map() function in Javascript

I have an array of objects:
const accounts = [account1, account2, account3, account4];
and each object is like:

const account4 = {
  owner: 'Sarah Smith',
  movements: [430, 1000, 700, 50, 90],
  interestRate: 1,
  pin: 4444,
};

I need to build the username from each of the objects which is formed by concatenating the first letters of individual words-
Example: For “Sarah Smith”, it is “ss”.
And I have written this code using two maps:

let userNames = accounts.map(account => {
  account.owner
    .toLowerCase()
    .split(' ')
    .map(f => f[0])
    .join('');
});

And when I log the userNames – they are all undefined.

[undefined, undefined, undefined, undefined];

But the output should be something like:

["js","ss","tc","sw"];

where:
js-jonas smith,
ss-sarah smith,
tc-tom cruise,
sw-serena williams.
Why is this happening?