Using ian:accounts-ui-bootstrap-3 profile.first-name returns NaN though it shows to be populated in console

Question

I am using ian:accounts-ui-bootstrap-3 for creating additional fields in my signin form in Meteor. The fields are getting populated. When I check the fields in JS console I see my first-name and last-name populated but when I try to retrieve them they return NaN.

My registration.js

Accounts.ui.config({
requestPermissions: {},
extraSignupFields: [{
    fieldName: 'first-name',
    fieldLabel: 'First name',
    inputType: 'text',
    visible: true,
    validate: function(value, errorFunction) {
      if (!value) {
        errorFunction("Please write your first name");
        return false;
      } else {
        return true;
      }
    }
}, {
    fieldName: 'last-name',
    fieldLabel: 'Last name',
    inputType: 'text',
    visible: true,
}, {
    fieldName: 'gender', 
    showFieldLabel: false,      // If true, fieldLabel will be shown before radio group
    fieldLabel: 'Gender',
    inputType: 'radio',
    radioLayout: 'vertical',    // It can be 'inline' or 'vertical'
    data: [{                    // Array of radio options, all properties are required
        id: 1,                  // id suffix of the radio element
        label: 'Male',          // label for the radio element
        value: 'm'              // value of the radio element, this will be saved. 
      }, {
        id: 2,
        label: 'Female',
        value: 'f',
        checked: 'checked'
    }], 
    visible: true
}]
});

onlineUsers.js

Meteor.publish("online", function(){
  return Meteor.users.find({"status.online" : true});
});

output

Meteor.users.findOne({"status.online": true}).profile
Object {first-name: "tarun", last-name: "", gender: "m"}
Meteor.users.findOne({"status.online": true}).profile.gender
"m"
Meteor.users.findOne({"status.online": true}).profile.first-name
NaN

can anyone help please?