ResponsiveFrame not receiving containerWidth property about semiotic HOT 13 CLOSED

import React, { Component } from "react";
import { ResponsiveXYFrame, XYFrame, ORFrame, NetworkFrame } from "semiotic";

const testData = [
  {
    id: "linedata-l",
    color: "#ff0000",
    data: [{ px: 1, py: 250 }, { px: 14, py: 250 }]
  },
  {
    id: "linedata-h",
    color: "#ff0000",
    data: [{ px: 1, py: 1250 }, { px: 14, py: 1250 }]
  },
  {
    id: "linedata-1",
    color: "#00a2ce",
    data: [
      { py: 500, px: 1 },
      { py: 700, px: 2 },
      { py: null, px: 3 },
      { py: null, px: 4 },
      { py: 200, px: 5 },
      { py: 300, px: 6 },
      { py: 500, px: 7 },
      { py: 500, px: 8 },
      { py: 700, px: 9 },
      { py: null, px: 10 },
      { py: null, px: 11 },
      { py: 200, px: 12 },
      { py: 300, px: 13 },
      { py: 500, px: 14 }
    ]
  },
  {
    id: "linedata-2",
    color: "#4d430c",
    data: [
      { py: 100, px: 1 },
      { py: 700, px: 2 },
      { py: 800, px: 3 },
      { py: 600, px: 4 },
      { py: 0, px: 5 },
      { py: 0, px: 6 },
      { py: 0, px: 7 },
      { py: 100, px: 8 },
      { py: 700, px: 9 },
      { py: 800, px: 10 },
      { py: 600, px: 12 },
      { py: 30, px: 13 },
      { py: 50, px: 13.5 },
      { py: 100, px: 14 }
    ]
  },
  {
    id: "linedata-3",
    color: "#b3331d",
    data: [
      { py: 1000, px: 1 },
      { py: 800, px: 2 },
      { py: 200, px: 3 },
      { py: 300, px: 4 },
      { py: 300, px: 5 },
      { py: 400, px: 6 },
      { py: 1300, px: 7 },
      { py: 1300, px: 8 },
      { py: 1250, px: 9 },
      { py: 1200, px: 10 },
      { py: 1000, px: 10.5 },
      { py: 900, px: 12 },
      { py: 800, px: 14 }
    ]
  },
  {
    id: "linedata-4",
    color: "#b6a756",
    data: [
      { py: 600, px: 1 },
      { py: 700, px: 2 },
      { py: 300, px: 3 },
      { py: 500, px: 4 },
      { py: 600, px: 5 },
      { py: 600, px: 6 },
      { py: 600, px: 7 }
    ]
  }
];
          <ResponsiveXYFrame
            responsiveWidth="true"
            responsiveHeight="true"
            size={[
              gridWidth,
              300
            ]}
            lines={testData}
            lineDataAccessor={"data"}
            lineStyle={d => ({
              fill: d.color,
              fillOpacity: 0.5,
              stroke: d.color,
              strokeWidth: "3px"
            })}
            defined={d => d.py !== null}
            xAccessor={"px"}
            yAccessor={"py"}
            margin={{ top: 60, bottom: 65, left: 60, right: 20 }}
            axes={[
              { orient: "left", tickFormat: d => d },
              { orient: "bottom", tickFormat: d => d }
            ]}
          />

import React from "react";
import ReactDOM from "react-dom";

import {ResponsiveXYFrame} from "semiotic";

import "./style.css";

const main = document.body.appendChild(document.createElement("main"));

const numPoints = 100;
const data = new Array(numPoints);

for (let i = 0; i < numPoints; i++) {
  data[i] = [Math.random(), Math.random()];
}

ReactDOM.render(
  <figure>
    <ResponsiveXYFrame
      responsiveWidth={true}
      responsiveHeight={true}
      points={data}
      xAccessor={d => d[0]}
      yAccessor={d => d[1]}
      axes={[
        {orient: "left"},
        {orient: "bottom"}
      ]}
    />
  </figure>,
  main
);

html {
  box-sizing: border-box;
}

*, *:after, *:before {
  box-sizing: inherit;
}

main {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.responsive-container {
  width: 100%;
  height: 100%;
}

figure {
  margin: 0;
  padding: 20px;
  width: 100%;
  height: 100%;
}