React Recharts - dynamic line chart only showing data for one line - reactjs

Question

I have a sample chart here:
https://codesandbox.io/s/rechart-stackoverflow-forked-ev1tt?file=/src/BarGraph.js
It is a dynamically created line chart (dynamic number of lines) but the tooltip is only showing the data for one of the lines.
Am wondering how to get the other dynamically created lines' data in the tooltip...
Code:
import React, { Component } from "react";
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
LineChart,
Line
} from "recharts";
import _ from "underscore";
class BarGraph extends Component {
state = {
channels: [],
data: []
};
componentDidMount() {
let data = {
channels: ["219180924-2", "219180924-1"],
data: [
{ period: 10, "219180924-2": 0 },
{ period: 11, "219180924-2": 0 },
{ period: 12, "219180924-2": 0 },
{ period: 13, "219180924-2": 0 },
{ period: 14, "219180924-2": 0 },
{ period: 15, "219180924-2": 0 },
{ period: 16, "219180924-2": 0.01 },
{ period: 17, "219180924-2": 0.33 },
{ period: 18, "219180924-2": 0.14 },
{ period: 19, "219180924-2": 0.22 },
{ period: 20, "219180924-2": 0.69 },
{ period: 10, "219180924-1": 0.12 },
{ period: 11, "219180924-1": 0.19 },
{ period: 12, "219180924-1": 0.2 },
{ period: 13, "219180924-1": 0.22 },
{ period: 14, "219180924-1": 0.29 },
{ period: 15, "219180924-1": 1.51 },
{ period: 16, "219180924-1": 0.03 },
{ period: 17, "219180924-1": 0 },
{ period: 18, "219180924-1": 0 },
{ period: 19, "219180924-1": 0 },
{ period: 20, "219180924-1": 0 }
]
};
this.setState({
channels: data.channels,
data: data.data
});
}
render() {
return (
<LineChart
width={600}
height={300}
data={this.state.data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="1 " />
<XAxis dataKey={"period"} allowDuplicatedCategory={false} />
<YAxis />
<Tooltip />
<Legend />
{this.state.channels.map((channel) => (
<Line dataKey={channel} name={channel} strokeWidth={2} />
))}
</LineChart>
);
}
}
export default BarGraph;