How do I change content after I update the page - @PreserveOnRefresh + AppL


Got a small issue here! I want to change the content in AppLayout and I’m using @PreserveOnRefresh, which means that the text/numbers in the fields remains after I refreshing the web page.

But after refreshing the web page. I cannot change the content in AppLayout. I get errors then.
What can I do to make sure that I still can use @PreserveOnRefresh with AppLayout and change the content after I have refreshed the page?

java.lang.IllegalStateException: Can't move a node from one state tree to another. If this is intentional, first remove the node from its current state tree by calling removeFromTree

Example code:

@Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, viewport-fit=cover")
public class MainView extends AppLayout {
	private static final long serialVersionUID = 1L;

	private TopTemplate topTemplate;
	private LoadExportTemplate loadExportTemplate;
	private BuildPredictValidateTemplate buildPredictValidateTemplate;

	public void init() {
		// Add bar image and drawer toggle
		addToNavbar(topTemplate.getDrawerTogggle(), topTemplate.getBarImage());
		// Add the tabs
		// Create the content as vertical layout
		VerticalLayout layout = new VerticalLayout();
		VerticalLayout buildPredictValidateLayout = buildPredictValidateTemplate.getBuildButtonPredictButtonValidateButtonTextArea();
		VerticalLayout loadExportLayout = loadExportTemplate.getSubjectCounterExportButtonUploaders();
		// Set content
		// Get the tabs that can change the vertical layout
		Tab buildPredictValidate = topTemplate.getBuildPredictValidate();
		buildPredictValidate.getElement().addEventListener("click", e ->{
		Tab loadExport = topTemplate.getLoadExport();
		loadExport.getElement().addEventListener("click", e ->{