Recharts vertical gap in values

import React from "react";
import { render } from "react-dom";

import { LineChart, Line, XAxis, YAxis, ReferenceLine } from "recharts";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const data = [];

const mid = 3;
for (let i = 0; i < 7; i++) {
  data.push({
    year: 2000 + i,
    value: i <= mid ? 3 * i + 50 : null,
    value2: i >= mid ? i : null
  });
}

const App = () => (
  <div style={styles}>
    <LineChart
      width={500}
      height={300}
      data={data}
      margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
    >
      <Line type="monotone" dataKey="value" stroke="#8884d8" dot={false} />
      <Line type="monotone" dataKey="value2" stroke="#8884d8" dot={false} />
      <XAxis dataKey="year" />
      <YAxis />
    </LineChart>
  </div>
);

render(<App />, document.getElementById("root"));