[BUG] Components don't re-render on React State update

[tobi1220]

Describe the bug The components don't re-render when a React state that's passed as a prop is updated. This happens for the React components in @microsoft/mgt-react as well as for the Web components in @microsoft/mgt-components (I tested both in a React app).

To Reproduce You can test this with, for example, the file-list. (see full code below) Steps to reproduce the behavior:

1. Init a new React app with CRA like so: yarn create react-app my-app --template typescript
2. Add a stateful value and its update function like so: const [query, setQuery] = useState("");
3. Add a <FileList /> in your App.tsx
4. Add a function to the itemClick event that sets the current fileListQuery to the id of the clicked folder like so: <FileList fileExtensions={[""]} disableOpenOnClick itemClick={(e: CustomEvent<DriveItem>) => {setQuery(`/me/drive/items/${e.detail.id}/children`);}} fileListQuery={query}></FileList>

Expected behavior The state update should trigger a re-render of <App /> and, by doing so, should update the MGT component.

Environment:

• OS: Windows
• Browser: Chrome
• Framework: React
• Context: MGT Core
• Version: 4.1.0
• Provider: new Msal2Provider({clientId: "redacted", authority: "redacted", redirectUri: "redacted", scopes: ["files.read"]});

Full code:

import {
  Login,
  FileList,
} from '@microsoft/mgt-react';
import { DriveItem } from '@microsoft/microsoft-graph-types';
import { useState } from 'react';

const App = () => {
  const [query, setQuery] = useState("");

  return (
    <div className='App'>
      <Login />

      <FileList /*key={query}*/ fileExtensions={[""]} disableOpenOnClick itemClick={(e: CustomEvent<DriveItem>) => {setQuery(`/me/drive/items/${e.detail.id}/children`);}} fileListQuery={query}></FileList> 
    </div>
  );
}

export default App;

Workaround Add a key prop that is set to the respective state value to force a re-render every time this state is updated (although this is not recommended by React). In this case: key={query} (uncomment this in the full code provided above).

Additional context: As mentioned above, this bug applies not only to the React- but also the Web components. I set up a new React app, registered the web components in it manually and set an attribute to a stateful value to test this.