React-Coffee-Gauge не будет загружать 2 отдельных датчика на одной странице

Question

У меня один датчик работает хорошо, но когда я добавляю второй датчик, появляется только второй датчик. Если я добавлю третью, появится только третья. Я использую react-coffee-gauge. Все, что я хочу, это иметь 2 отдельных датчика. Вы можете увидеть результат в [71.115.155.115:509]. При запуске кода не сообщалось об ошибках. Вот мой код:

import React, {Component} from "react";
import { Col } from "antd";
import ChartRenderer from "../components/ChartRenderer";
import Dashboard from "../components/Dashboard";
import DashboardItem from "../components/DashboardItem";
import ReactCoffeeGauge from 'react-coffee-gauge';
import ReactCoffeeGauge2 from 'react-coffee-gauge';


var WindGauge = {
  angle: 0, // The span of the gauge arc
  radiusScale: 1, // Relative radius
  pointer: {
    length: 0.5, // // Relative to gauge radius
    strokeWidth: 0.024, // The thickness
    color: '#000000' // Fill color
  },
  renderTicks: {
    divisions: 5,
    divWidth: 0.8,
    divLength: 0.7,
    divColor: '#333333',
    subDivisions: 3,
    subLength: 0.5,
    subWidth: 0.6,
    subColor: '#666666'
  },
  titleSped: 'Wind Speed (MPH)',
  lineWidth: 0.15,
  limitMax: true,     // If false, max value increases automatically if value > maxValue
  limitMin: true,     // If true, the min value of the gauge will be fixed
  colorStart: '#6FADCF',   // Colors
  colorStop: '#8FC0DA',    // just experiment with them
  strokeColor: [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]], //To see which ones work best for you
  generateGradient: true,
  highDpiSupport: true, // High resolution support
  staticZones: [
    {strokeStyle: "#F03E3E", min: 17.5, max: 25}, //Red from 100 to 130
    {strokeStyle: "#30B32D", min: 0, max: 5}, //Green
    {strokeStyle: "#FFDD00", min: 5, max: 17.5}, //Yellow
  ],
  staticLabels: {
    font: "12px sans-serif",
    labels: [0, 5, 10, 15, 20, 25],
    color: "#000000",
    fractionDigits: 0
  }
};

var PowerGauge = {
  angle: 0, // The span of the gauge arc
  radiusScale: 1, // Relative radius
  pointer: {
    length: 0.5, // // Relative to gauge radius
    strokeWidth: 0.024, // The thickness
    color: '#000000' // Fill color
  },
  renderTicks: {
    divisions: 5,
    divWidth: 0.8,
    divLength: 0.7,
    divColor: '#333333',
    subDivisions: 3,
    subLength: 0.5,
    subWidth: 0.6,
    subColor: '#666666'
  },
  titleSped: 'Power (Watts)',
  lineWidth: 0.15,
  limitMax: true,     // If false, max value increases automatically if value $
  limitMin: true,     // If true, the min value of the gauge will be fixed
  colorStart: '#6FADCF',   // Colors
  colorStop: '#8FC0DA',    // just experiment with them
  strokeColor: [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]], //To s$
  generateGradient: true,
  highDpiSupport: true, // High resolution support
  staticZones: [
    {strokeStyle: "#F03E3E", min: 750, max: 1000}, //Red from 100 to 130
    {strokeStyle: "#30B32D", min: 0, max: 250}, //Green
    {strokeStyle: "#FFDD00", min: 250, max: 750}, //Yellow
  ],
  staticLabels: {
    font: "12px sans-serif",
    labels: [0, 250, 500, 750, 1000],
    color: "#000000",
    fractionDigits: 0
  }
};

const DashboardItems = [
  {
    id: 0,
    name: "New Chart",
    refreshKey:{
      every: `5 second`
    },
    vizState: {
      query: {
        measures: ["Orders.amount"],
        timeDimensions: [
          {
            dimension: "Orders.paymentDate",
            dateRange: ['2020-03-03T17:03:00.00','2020-03-03T23:12:52.00'], //Chagne to "last day"
            granularity: "minute" //change to hour for real Dashboard
          }
        ],
        filters: []
      },
      chartType: "line"
    }
  }
];
const DashboardItems2 = [
  {
    id: 1,
    name: "New Chart",
    vizState: {
      query: {
        measures: ["Orders.count"],
        timeDimensions: [],
        filters: []
      },
      chartType: "number"
    }
  }
];

const DashboardPage = () => {
  const dashboardItem = item => (
    <Col
      span={24}
      lg={12}
      key={item.id}
      style={{
        marginBottom: "24px"
      }}
    >
      <DashboardItem title={item.name}>
        <ChartRenderer vizState={item.vizState} />
      </DashboardItem>
    </Col>
  );

  const dashboardItem2 = item => (
    <Col
      span={6}
      lg={2}
      key={item.id}
      style={{
        marginBottom: "0px"
      }}
    >
      <DashboardItem title={item.name}>
        <ChartRenderer vizState={item.vizState} />
      </DashboardItem>
    </Col>
  );

  const Empty = () => (
    <div
      style={{
        textAlign: "center",
        padding: 12
      }}
    >
      <h2>
        There are no charts on this dashboard. Use Playground Build to add one.
      </h2>
    </div>
  );

  return DashboardItems.length ? (
    <Dashboard dashboardItems={DashboardItems}>
      {DashboardItems.map(dashboardItem)}
      {DashboardItems2.map(dashboardItem2)}
      <ReactCoffeeGauge
        min="0"
        max="25"
        value="12.5" //needs to be set to the last value from wind speed(MPH)
        opts={WindGauge}
      />
      <ReactCoffeeGauge2
        min="0"
        max="1000"
        value="670" //needs to be set to the last value from Power(W)
        opts={PowerGauge}
      />
    </Dashboard>
  ) : (
    <Empty />
  );
};

export default DashboardPage;