title: Component does not rerender in react when changing tab item
body: <p>I would make a dynamic tabs chat using <a href="https://fluentsite.z22.web.core.windows.net/components/chat/definition?showCode=true&amp;showRtl=false&amp;showTransparent=false&amp;showVariables=false#types-chat" rel="nofollow noreferrer">fluent ui for react</a>.</p>
  
  <p>Actually I'm showing content using a conditional switch that return chat content depending on tab item clicked.</p>
  
  <p>Here's the switch condition</p>
  
  <pre><code>let switchTasks = (type, data) =&gt; {
    switch (type) {
      case "people":
        return &lt;p&gt;{data.content}&lt;/p&gt;; // send basic text
      case "chat":
        return &lt;ChatExample infos={data} /&gt;; // send component chat.
      default:
        break;
    }
  };
  </code></pre>
  
  <p>In my chat component I set a state that I initialise with initial chat content ( should come from state) then I update every time I add a message.</p>
  
  <pre><code>const ChatExample = props =&gt; {
    const [inputValue, setInputValue] = React.useState("");
    const items = [
      {
        message: (
          &lt;Chat.Message
            content="Hello"
            author="John Doe"
            timestamp="Yesterday, 10:15 PM"
            mine
          /&gt;
        ),
        contentPosition: "end",
        attached: "top",
        key: "message-id-1"
      },
      ...
    ];
    const [itemsChat, setItemsChat] = React.useState(items);
  
    const handleKeyDown = event =&gt; { // to add messages to chat.
      if (event.key == "Enter") {
        let elm = {
          message: (
            &lt;Chat.Message
              content={inputValue}
              author="John Doe"
              timestamp="Yesterday, 10:15 PM"
              mine
            /&gt;
          ),
          contentPosition: "end",
          attached: "top",
          key: "message-id-1"
        };
        setItemsChat(itemsChat =&gt; [...itemsChat, elm]);
        setInputValue("");
      }
    };
    return (
      &lt;div&gt;
        &lt;Chat items={itemsChat} /&gt;
        &lt;ItemLayout
          content={
            &lt;Input
              value={inputValue}
              onKeyDown={event =&gt; handleKeyDown(event)}
              onChange={event =&gt; setInputValue(event.target.value)}
              fluid
              clearable
              placeholder="Message..."
            /&gt;
          }
        /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Here's a <a href="https://codesandbox.io/s/fluent-ui-example-zghxi?file=/example.js:2926-6695" rel="nofollow noreferrer">demo of issue</a> </p>
  
  <p>My actual problem is that the chat content does not change when I select tab 2 or 3 (author name says at last tab selected after selecting <code>tab 1</code> )</p>
  
  <p>It does change content when I replace  <code>&lt;Chat items={itemsChat} /&gt;</code> with  <code>&lt;Chat items={items} /&gt;</code>but in this case I'll not be able to add messages to chat (<code>itemsChat</code> represent <code>items</code> + new messages )</p>
  
  <p>How can I make tabs updates chat content by keeping adding new messages to chat ?</p>