d3 line chart with Typescript and React

I'm new to d3 and have to figure out how to draw a linechart using d3 with Typescript and React.

I've allready been searching for hours on this topic in the web, but obviously those three technologies combined together don't seem to be pretty popular as I was not able to find a working solution.

I've also allready tried to convert different d3 react line charts to typescript, but so far none of them worked.

My last attempt was the amooyp one on codepen. But it had problems with inferring the right type, as d3.extent is overloaded.

Can anyone provide a working example of a d3 linechart using react and typescript?

Maby this topic is also interesting for other people workin with TS, React and d3.

Edit

To provide further information. Here ist what I have so far.

Chart.tsx

import React, { Component } from 'react'
import * as d3 from 'd3';

import DataSeries from './DataSeries';

import './chart.scss'

interface Props {
  width: number;
  height: number;
  data: any;
}

class Chart extends Component<Props> {

  color() {
    d3.scaleOrdinal(d3.schemeCategory10);
  }

  render() {


    let { width, height, data } = this.props;

    let xScale = d3.scaleLinear()
      .domain(data.xValues)
      .range([0, width]);

    let yScale = d3.scaleLinear()
      .range([height, 10])
      .domain([data.yMin, data.yMax]);



    return (
      <div className="col-md-6">
        <svg className="">
          <DataSeries
            xScale={xScale}
            yScale={yScale}
            data={data}
          />
        </svg>
      </div>
    );
  }

}

export default Chart

DataSeries.tsx

import * as React from 'react';
import * as d3 from 'd3';

import Line from './Line';

interface Props {
    data: any;
    xScale: Function;
    yScale: Function;
}

class DataSeries extends React.Component<Props> {

    render() {
        let { data, xScale, yScale } = this.props;

        let line = d3.line<any>()
            .x((d) => { return xScale(d.x); })
            .y((d) => { return yScale(d.y); });

        let lines = data.points.map((series: any, id: any) => {
            return (
                <Line
                    path={line(series)}
                />
            );
        });

        return (
            <g>
                <g className="series">{lines}</g>
                <g className="axes"></g>
            </g>
        );
    }
}

export default DataSeries;

Line.tsx

import * as React from 'react';

interface Props {
    path: any;
}

class Line extends React.Component<Props> {

    render() {
        let stroke = 'blue';
        let strokeWidth = 2;
        let fill = 'none';
        console.log(this.props)

        let { path } = this.props;
        return (
            <path
                d={path}
                fill={fill}
                stroke={stroke}
                strokeWidth={strokeWidth}
            />
        );
    }
}

export default Line