Expected behavior: When I modify the value of the select through the val () function the change should be reflected in the DOM

Actual behavior:follow these steps to reproduce the cases

https://mdbootstrap.com/snippets/jquery/wealthtechs/1865949

• Case 1: Reload the snippet and press the 'update value' button to update the select

• Behavior: The value of the select is updated and the change is reflected in the DOM

• Case 2: reload the snippet and select the first option of the select (USA) then press the 'update value' button

• Behavior: The value of the select is updated but the change is not reflected in the DOM

I need some way to update the value of the select and have this reflected in the DOM. I read that an option is to reset the select, select the value and re-initialize it

$ ('. mdb-select'). materialSelect ({destroy: true});

$ ('#mySelect'').val("3");

$ ('. mdb-select'). materialSelect ({});

and I think it doesn't make sense, you shouldn't have to reset a select in order to change its value and in case you have 10 selectors on the same screen the entire DOM would be altered by a simple update (with 10 select at the same time it collapses the screen)