How to create multiple line charts from a single component in React - reactjs

Question

I am trying to create multiple line charts from a single component in react and seem to be getting lost a big.
My API is giving me back data that looks like this.
[
{
"price": 6500,
"expiration": "10",
"bid": 86.44,
"mark": 89.74,
"ask": 95.94,
"dif": -0.01575
},
{
"price": 6750,
"expiration": "10",
"bid": 74.09,
"mark": 78.77,
"ask": 82.52,
"dif": -0.02023
},
{
"price": 7000,
"expiration": "20",
"bid": 69.28,
"mark": 70.67,
"ask": 74.62,
"dif": -0.03171
},
{
"price": 7250,
"expiration": "20",
"bid": 68.06,
"mark": 67.44,
"ask": 71.08,
"dif": -0.06388
}
]
What I am trying to do is to create a component that will take this data and map it to two separate line charts using Chart.Js.
Each chart should be broken out by expiration. With the X-axis being price and the Y-axis is supposed to be mark. I have found a good example implementing close to what I want to do here --> How to map multiple charts with chart.js in react
But I want to create 2 charts from this data. Where the charts are grouped by Expiration. I am not sure what I am missing from the example above that I would need to change to do this. Any help would be amazing.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Line } from "react-chartjs-2";
import axios from "axios";
export default class Chart extends Component {
constructor(props) {
super(props);
this.state = {
chartData: [],
data: []
};
}
componentDidMount() {
fetch(API, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({query: query}),
})
.then(res => res.json())
.then(
(res)=>{
const x = res.data;
let chartData = [];
x.forEach(element => {
chartData.push({
labels: element.expiration,
datasets: [{ data: element.price}]
});
});
this.setState({ chartData });
});
}
render() {
return (
<div className="chart">
{this.state.chartData.map((n, index) => {
return <Line key={index} data={n} />;
})}
</div>
);
}
}