Variable not changing in screen component

I am trying to create a lwc button which changes a variable when clicked and it works but the problem is that the variable does not change while the screen is opened and it just changes whenever i press finish .

For example here I am setting a visibility of a component to show only if the variable is test

and when the button is clicked the variable should be test but when i try to click the button the condition does not succeed but in the debugging it shows that the variable is set so does anyone know why is this happening . The image below shows that the value was set but it did not reflect on the screen component

This is the js code

import { LightningElement, api, track } from 'lwc';
import { FlowAttributeChangeEvent,
FlowNavigationNextEvent,
}           from 'lightning/flowSupport';

export default class GenericFlowButton extends LightningElement {
    @api inputTest;
    @api outputTest;
    @api label;

    renderedCallback() {
        const button = this.template.querySelector('lightning-button');
        console.log('Button: '+button);

        button.label=this.label;
    }


       handleClick(event) {
        const attributeChangeEvent = new FlowAttributeChangeEvent('outputTest','test');
        this.dispatchEvent(attributeChangeEvent); 


    }

}