recharts: Unable to use number type in both axis

I am trying to plot a time series graph using line chart. X axis will have time and Y axis will have price of an item. Since there is not date/time type in this library, I’m using a number corresponding to the time. But when I render, I get a console warning “x-axis should be category axis when the layout is horizontal” and an error “Uncaught TypeError: Cannot read property ‘coordinate’ of undefined”

Here is the code I am trying

import React from 'react';
import ReactDOM from 'react-dom';
import { LineChart, Line, CartesianGrid, YAxis, XAxis, Tooltip } from 'recharts';

const data = [
    {date:10, price:50 },
    {date:11, price:60 },
    {date:12, price:54 },
    {date:15, price:55 },
    {date:18, price:58 },
    {date:20, price:53 }
]

const SimpleLineChart = React.createClass({
    render() {
        return (
            <LineChart width={600} height={300} data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }} >
              <Line type="monotone" dataKey="price" stroke="#8884d8" xAxisId="dateAxis" yAxisId="priceAxis" unit="Kg" />
              <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
              <XAxis type="number" dataKey="date" xAxisId="dateAxis" />
              <YAxis yAxisId="priceAxis" />
              <Tooltip />
            </LineChart>
        );
    }
})

ReactDOM.render(<SimpleLineChart />, document.querySelector("#main"));