I've solved this and this actually solved by a manually props update the variable. Though still its not totally working with the color but works fine for Sizes. Where for colors I get another way out. The updated code has given below in case of any help you may get. I bold the solution part.
 

    async onCreateColor(newValue){
        var selectedColors = Array.from(this.state.selectedColors);
        selectedColors.push(newValue)

        var selectedSizes = Array.from(this.state.selectedSizes);

        await this.orm.call('sale.order.upload.wizard','add_new_variant',	​	​	​[this.props.record.model.config.resId,this.props.product_template_id,'Color',newValue]).then((data) => {});
        await this.orm.call('sale.order','get_matrix', [this.props.record.config.resId,this.props.product_template_id]).then((data) => {
            this.props.header = data['header']
            this.props.rows = data['matrix']
        });
        // I can hide all the rows at this point again
        this.notificationService.add(_t("New Color Added: " + newValue +"."), {
                        title: "Success",
                        type: "success"
                    });

        this.colorChoices.push({
            value : newValue,
            label : newValue,
        });
        this.onColorSelect(selectedColors);
        this.onSizeSelect(selectedSizes);





    },

    async onCreateSize(newValue){
        var selectedSizes = Array.from(this.state.selectedSizes);
        await this.orm.call('sale.order.upload.wizard', 'add_new_variant', [this.props.record.model.config.resId,this.props.product_template_id,'Size',newValue]).then((data) => {});
        this.notificationService.add(_t("New Size Added: " + newValue +"."), {
                title: "Success",
                type: "success",
            });
        // this part is for getting the variant matrix
        await this.orm.call('sale.order','get_matrix', [this.props.record.config.resId,this.props.product_template_id]).then((data) => {
            this.props.header = data['header']
            this.props.rows = data['matrix']
        });
        this.sizeChoices.push({
            value : newValue,
            label : newValue,
        });
        selectedSizes.push(newValue);
        this.onSizeSelect(selectedSizes);
    },

Here get_matrix is the copy of _get_matrix(built-in) but private. I just return the same thing from this function. and assign it to the props.