There are two components that are the same, just different sizes. One normal size and one large size. Both components have a parameter data type "profileIcon".
The user profile-icon component, normal size, is on their profile page. The larger size is used in the "profileEditor".
For the user to edit their profile icon, they open a bottom sheet "profileEditor". There they choose the background color and icon color they like... On top of this "profileEditor" tab, I used the larger size component. This component's parameter is set by the "profileEditor" Component State.
When the user is finished, they can either press "Save" button, that updates the database, or "Cancel" and that just closes the bottom sheet.
When they press "Save", the variables are updates in the database and the new profile icon is shown on the profile page.
However, when the user just changes the profileIcon in the editor and then presses "Cancel", the database is not updated, that's good, but the component on the profile page shows the data from the "profileEditor" state, though it's on a different page and it's a different component!
The Component on the profile page has the parameter set directly from "Authenticated User", so it should draw out of the database and have nothing to do with the "iconEditor" State.