Map through an array to form a line graph

i want to make a reusable line chart component from a given data. Currently, i have created the line chart component, but it is still not reusable.

Here is the Line Chart component which isn't reusable. Note that the "LineGraph" is repeated from the dataKey

`

export class LineChart extends Component{
  render(){
    return(
      <div className="bar-chart-container">
        <large style=>{this.props.label}</large>
        <ResponsiveContainer width='100%' height={250}>
          <ChartLine width={680} height={250} data={this.props.data}>
            <XAxis dataKey="name" />
            <YAxis />
            <CartesianGrid strokeDasharray="3 3"/>
            <Tooltip />
            <Legend iconType="circle" iconSize={8}/>
            <LineGraph type="monotone" dataKey="BSD" stroke="#f8aa27"/>
            <LineGraph type="monotone" dataKey="FSD" stroke="#94dea9"/>
            <LineGraph type="monotone" dataKey="SMS" stroke="#795548"/>
            <LineGraph type="monotone" dataKey="TDMO" stroke="#0099ff"/>
            <LineGraph type="monotone" dataKey="CEM" stroke="#642bb6"/>
          </ChartLine>
        </ResponsiveContainer>
      </div>
    )
  }
}

`

And here is the given data

<LineChart
   label="SPI HISTORY"
   data={[
         { name: 'JAN', BSD: 0.3, FSD: 0.6 , SMS: 1.2 , TDMO: 1.4 , CEM: 0.8 },
         { name: 'FEB', BSD: 0.5, FSD: 0.3 , SMS: 1.1 , TDMO: 1.8 , CEM: 1.0 },
         { name: 'MAR', BSD: 0.2, FSD: 0.4 , SMS: 1.1 , TDMO: 1.7 , CEM: 1.2 },
         { name: 'APR', BSD: 0.3, FSD: 0.9 , SMS: 0.7 , TDMO: 1.4 , CEM: 1.1 },
         { name: 'MAY', BSD: 0.6, FSD: 1.0 , SMS: 0.8 , TDMO: 1.6 , CEM: 1.2 },
         { name: 'JUN', BSD: 0.4, FSD: 1.5 , SMS: 0.9 , TDMO: 0.8 , CEM: 1.1 },
         { name: 'JUL', BSD: 0.6, FSD: 1.2 , SMS: 1.5 , TDMO: 1.0 , CEM: 1.6 },
         { name: 'AUG', BSD: 0.9, FSD: 1.3 , SMS: 1.8 , TDMO: 0.3 , CEM: 1.5 },
         { name: 'SEP', BSD: 0.7, FSD: 0.9 , SMS: 1.3 , TDMO: 0.5 , CEM: 1.6 },
         { name: 'OCT', BSD: 0.8, FSD: 1.0 , SMS: 1.6 , TDMO: 1.0 , CEM: 1.4 },
         { name: 'NOV', BSD: 0.5, FSD: 0.3 , SMS: 1.7 , TDMO: 0.8 , CEM: 1.1 },
               { name: 'DEC', BSD: 0.2, FSD: 0.4 , SMS: 1.6 , TDMO: 1.5 , CEM: 1.2 }
     ]}/>

And here is the output: Graph Rendered

How do i make it reusable so i don't have to write each "LineGraph" for each data (BSD, FSD, SMS, TDMO , CEM) on the LineChart Component? Thank you very much!