problems persisting style changes

[fresidue]

I'm trying to reassign a new style to a box. However, the style change does not seem to persist, and I cannot find a setStyle method. Is this the desired behavior, and if so, what would be the proper way to change styles in conjuction with focus events?

A small example to illustrate what happens:

const blessed = require('neo-blessed');
const delay = dt => new Promise(resolve => setTimeout(resolve, dt));

const screen = blessed.screen({
    smartCSR: true,
    log: `${__dirname}/subviews.log`,
});
// Quit on Escape, q, or Control-C.
screen.key(['q', 'C-c'], (ch, key) => process.exit(0));

const background = blessed.box({
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
});
screen.append(background);

const box = blessed.box({
  left: 2,
  top: 2,
  width: 10,
  height: 10,
  style: {
    bg: 'red',
    focus: {bg: 'blue'},
  },
});
box.on('focus', () => screen.log('box focused'));
box.on('blur', () => screen.log('box blurred'));

background.append(box);
screen.render()
const DELAY = 2000;

screen.log('box starts out red (original bg), which is correct')
delay(DELAY)
  .then(() => {
    box.focus();
    screen.log('on focus it turns blue (original focus.be), which is correct');
  })
  .then(() => delay(DELAY))
  .then(() => {
    box.style = {
      bg: 'green',
      focus: {bg: 'purple'},
    };
    screen.log('on style change should be purple = focus.bg (but IS green = bg, which is incorrect)');
    screen.render();
  })
  .then(() => delay(DELAY))
  .then(() => {
    background.focus();
    screen.render();
    screen.log('should be green (changed bg), but is red (original bg), so incorrect again');
  });