report.updateSettings for layoutType not working

I need help on this issue. I've spent hours to no avail.

I am doing a app embedded report with Javascript library following the tutorials. Everything is working except updating the layoutType setting using the report.updateSettings.

If I define the layoutType in the orginal config settings of the ebedded report, it will work, but nothing I am doing will update it dynamically once the page is loaded. I can change any other settin, for example: {filterPaneEnabled: true}, and it will work but it won't update layoutType setting.

Please help!

Code:

/**
 * Check if screen size is mobile. If so, change report to mobile view.
 */
function checkWidth() {
    var newSettings = null;
    var windowsize = $(window).width();

    if (windowsize < 768) {
        console.log("Mobile! window size is: " + windowsize);
            newSettings = {
                layoutType: models.LayoutType.MobilePortrait
        };
    } else {
        // Get models. models contains enums that can be used.
        console.log("Desktop! window size is: " + windowsize);
            newSettings = {
                layoutType: models.LayoutType.Master
            };
    }
    
    // Get a reference to the embedded report HTML element
    embedContainer = $('#reportContainer')[0];

    // Get a reference to the embedded report.
    report = powerbi.get(embedContainer);

        // Update the settings by passing in the new settings you have configured.
        report.updateSettings(newSettings)
            .then(function () {
                console.log("Changed Layout to:");
                console.log(newSettings);
            })
            .catch(function (errors) {
                console.log(errors);
            });



}