React Component inline style shorthand declaration overwriting each other

I have a React component that gets passed a values object that looks like:

{gridColumn: '1 / 3', gridRow: '2 / 5', gridArea: 'header'}

to then add to a component's style like:

this.cell.style.setProperty('grid-area', values.gridArea);
this.cell.style.setProperty('grid-column', values.gridColumn);
this.cell.style.setProperty('grid-row', values.gridRow);

However, using grid-column and grid-row properties, these get abbreviated to a shorthand declaration of 'grid-area: 2 / 1 / 5 / 3' in the browser and overwrite my grid-area style.

This also happens if i set it in a loop:

for (let prop in values) {
  this.cell.style[prop] = values[prop];
};

Is there a better way to do this?