Ember-data creating extraneous record in memory

I have a many to many relationship table with payload (additional field) coming from .Net WebAPI that I have modelled in ember-data. When I add a record into this table/relationship ember is creating an additional record that is held in memory until the user performs a browser page refresh. My models are:

// student.js
export default DS.Model.extend({
    name: DS.attr('string'),
    studentsClasses: DS.hasMany('student-class')
})

// class.js
export default DS.Model.extend({
    desc: DS.attr('string'),
    studentsClasses: DS.hasMany('student-class')
})

// student-class
export default DS.Model.extend({
    studentId: DS.attr('string'),
    student: DS.belongsTo('student'),
    class: DS.belongsTo('class'),
    grade: DS.attr('number')  // payload
})

Here is the code I use to create and add the many to many record. let newRecord = this.get(‘store’).createRecord(‘student-class’); newRecord.studentId = 1; newRecord.grade = 3; class.get(‘studentsClasses’).pushObject(newRecord);

The new record gets created and added and everything looks good on screen, until I come back to the same page and there is an extra record in the class.studentClasses array.

Any idea why ember-data is creating an extra record in memory and how I can stop it doing it please? Thanks