Unexpected Behavor at implementing Per User Authorization Feature.

*Issue Explanation:*

While doing the Quickstart guide for the Amplify Gen-2 I found a confuse behavor at implementing the per user authorization feature.
Here:

Due to the initial code of the *amplify-vite-react-template* at `App.tsx` the Per User Authorization feature won't work correctly, because if the user changes between to accounts to validate that the Per User Authorization works, the data got stock to the previous account:

https://github.com/aws-samples/amplify-vite-react-template/assets/54689488/21367b71-4e44-4d29-bbd6-b9039b126d48

In the example above, the account with email: **agustin.moranr@gmail.com** has 2 todos items written in Spanish, while the other account: **agustin.moranr+2@gmail.com** has 2 todos items written in English. As you can see when changing the account, the data got stuck and i need to reload the page to update the data.

I think this is not expected to happened because in the quickstart guide you are meant to use subscription method to query your data.

*Request of changes:*

I think one of the easiest ways of solving this is moving the TodosList to a separated component.
Something like this:


This way when the user implements the `Authenticator` component, the `TodosList` will be unmounted and mounted correctly, and updating subscription query data, retrieving the expected data for each user.

Maybe you can upadate the quickstart documentation to handle this properly, or maybe updating the template also would work!