Не получается прорисовать линии на мультилинейном графике в d3.js

Начал изучать бибилиотеку d3.js в React и решил для начала построить мультилинейный график стремя линиями sales, revenue и profit, но столкнулся с проблемой:

Строю по данным в массиве salesData. Оси X и Y по данным sales и date отрисовал, но никак не могу понять почему не получается отрисовать три линии.

В консоли появляется только тег

Не добавляется атрибут d с координатами и не могу понять почему и что я не так делаю. Буду очень признателен, если подскажете что я упускаю.

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

const AxisLeft = () => {

    const salesData = [
        { reportDate: "2022-01-01", sales: 1000, revenue: 50000, profit: 20000 },
        { reportDate: "2022-02-01", sales: 1200, revenue: 60000, profit: 25000 },
        { reportDate: "2022-03-01", sales: 800, revenue: 40000, profit: 15000 },
        { reportDate: "2022-04-01", sales: 800, revenue: 40000, profit: 15000 },
        { reportDate: "2022-05-01", sales: 800, revenue: 40000, profit: 15000 },
        { reportDate: "2022-06-01", sales: 800, revenue: 40000, profit: 15000 },
        { reportDate: "2022-07-01", sales: 800, revenue: 40000, profit: 15000 },
        { reportDate: "2022-08-01", sales: 800, revenue: 40000, profit: 15000 },
        { reportDate: "2022-09-01", sales: 800, revenue: 40000, profit: 15000 },
        { reportDate: "2022-10-01", sales: 800, revenue: 40000, profit: 15000 },
        { reportDate: "2022-11-01", sales: 800, revenue: 40000, profit: 15000 },
        { reportDate: "2022-12-01", sales: 800, revenue: 40000, profit: 15000 },
    ];


    const chartRef = useRef();



    
    useEffect(() => {

        const margin = { top: 30, right: 30, bottom: 70, left: 60 },
            width = 800 - margin.left - margin.right,
            height = 700 - margin.top - margin.bottom;



 


        const svg = d3
            .select(chartRef.current)
            // .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", `translate(${margin.left},${margin.top})`);

        const formattedData = salesData.map(d => ({
            date: d3.timeParse("%Y-%m-%d")(d.reportDate),
            sales: d.sales,
            revenue: d.revenue,
            profit: d.profit
        }));


        // создание оси X горизонталь date
        const xAxis = d3
            .scaleTime()
            .domain(d3.extent(formattedData, d => d.date))
            .range([0, width]);
        svg
            .append('g')
            .attr('transform', `translate(0, ${height})`)
            .call(d3.axisBottom(xAxis)
                .tickFormat(d3.timeFormat("%b"))
            );



        // создание оси Y вертикаль sales
        const yAxis = d3
            .scaleLinear()
            .domain([0, d3.max(salesData, (d) => d.sales)])
            .range([height, 0]);
        svg
            .append('g').call(d3.axisLeft(yAxis));





        let res = salesData.map(function(d){
            return d.key
        })

        let color = d3.scaleOrdinal()
            .domain(res)
            .range(['#e41a1c','#377eb8','#4daf4a'])


        // отрисовка линий 3 линии sales revenue profit
        const line = d3.line()
            .x((d) => xAxis(d.date))
            .y((d) => yAxis(d.sales))
             // .curve(d3[curve])


        svg // задаем стили каждой линии
            .selectAll('.path')
            .data(salesData)
            .enter()
            .append('path')
            .attr('fill', 'none')
            .attr('stroke', (d) => color(d.key))
            .attr('stroke-width', 1.5)
            .attr('d', line);



    }, [salesData]);

    return <svg ref={chartRef}/>;

};

export default AxisLeft;