Почему мой компонент дважды появляется на Twilio Flex?

Question

1. Загрузить пример приложения Twilio Flex (https://github.com/twilio/flex-ui-sample)
2. Изменить, чтобы создать пользовательский канал, как показано ниже
3. npm start

Почему он появляется дважды? (как показано на рисунке ниже)

index.js

import React from "react";
import ReactDOM from "react-dom";
import "regenerator-runtime/runtime";
import * as Flex from "@twilio/flex-ui";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import Sample from './Sample'

const mountNode = document.getElementById("root");

window.onload = () => {
  const predefinedConfig = window.appConfig || {};

  const configuration = {
    ...predefinedConfig,
  };

  const sampleChatChannel = Flex.DefaultTaskChannels.createDefaultTaskChannel('Sample',
    task => task.taskChannelUniqueName === 'sample');

  sampleChatChannel.addedComponents = [
    {
      target: 'TaskCanvasTabs',
      component: <Sample
        key="sample-tab"
      />,
      options: {
        sortOrder: 0,
        align: 'start',
        if: csrTask => csrTask.task.status === 'accepted'
      }
    }
  ];

  Flex.TaskChannels.register(sampleChatChannel);

  Flex
    .progress(mountNode)
    .provideLoginInfo(configuration, mountNode)
    .then(() => Flex.Manager.create(configuration))
    .then(manager => renderApp(manager))
    .catch(error => handleError(error));
};

function renderApp(manager) {
  ReactDOM.render(
    <App manager={manager} />,
    mountNode
  );
}

function handleError(error) {
  console.error("Failed to initialize Flex", error);
}

registerServiceWorker();

Sample.js

import React from 'react';

function Sample() {
  return (
    <div>
      Hello World
    </div>
  );
}

export default Sample;