All Boxes in the screen change when adding focu

[suahdad]

whenever the box that has the focus styling configured is focused, all of the elements in the screen had their style changed

i have a UI that instantiates like this

class Library extends TerminalList {
    constructor() {
        super(Config.library);
        this.addListener();
        this.events = new EventEmitter();
    }
...

the config used is below

const style =  {
    fg: 'grey',
    bg: 'black',
    border: {
        fg: '#000000'
    }
};
const border = { type: 'line' };
const Config = {
    controls: {
        label: 'Controls',
        border,
        bottom: '0',
        right: '0',
        width: '50%',
        height: 5,
        style
    },
    library:{
        bgFocus: 'blue',
        label: 'Library',
        border,
        style,
        left: 0,
        bottom: 0,
        width: '50%',
        height: '95%',
    },
    nowplaying:{
        label: 'Now Playing',
        border,
        style,
        right: 0,
        bottom: 6,
        width: '50%',
        height: 5,
        tags: true
    },
    queue:{
        label: 'Queue',
        border,
        style: {
            ...style,
            focus: {
                border: {
                    fg: 'blue'
                }
            }
        },
        right: 0,
        bottom: 11,
        width: '50%',
        height: '95%-11'
    }

};

module.exports = Config;