D3 hover mouseenter just shows one value

I was sucessfull in making d3 lollipop chart. Now the only problem that i am having is that i am not able to implement successful hover mouseenter. The problem it only shows one value in all the hover. I tried implementing the simplest approach but it does not works. If someone could help me it would be great. This is what i get

/* eslint-disable no-undef */
import React, { Component } from "react";
import "./Lollipop.css";
import * as d3 from "d3";

class LollipopChart extends Component {
  state = {
    datas: [
      {
        intensity: 102,
        ms1_peak_id: 11071132,
        ms2_ion_id: 34629747,
        mz: 294.154
      },
      {
        intensity: 162,
        ms1_peak_id: 11071132,
        ms2_ion_id: 34629748,
        mz: 802.428
      },
      {
        intensity: 232,
        ms1_peak_id: 11071132,
        ms2_ion_id: 34629749,
        mz: 791.457
      },
      {
        intensity: 164,
        ms1_peak_id: 11071132,
        ms2_ion_id: 34629750,
        mz: 774.463
      },
      {
        intensity: 1630,
        ms1_peak_id: 11071132,
        ms2_ion_id: 34629751,
        mz: 819.449
      },
      {
        intensity: 247,
        ms1_peak_id: 11071132,
        ms2_ion_id: 34629752,
        mz: 774.434
      }
    ]
  };

  componentDidMount() {
    const data = this.state.datas;
    console.log(this.state.datas);
    this.drawChart(data);
  }

  drawChart(cobweb) {
    cobweb.sort(function(b, a) {
      return b.mz - a.mz;
    });
    const inten = cobweb.map(a => a.intensity);
    const max = inten.reduce((a, b) => Math.max(a, b));
    const mass = cobweb.map(a => a.mz);

    const container = d3.select(".container");
    const tooltip = container
      .append("div")
      .attr("id", "tooltip")
      .style("opacity", "0");

    const margin = {
      top: 50,
      right: 150,
      bottom: 130,
      left: 150
    };

    const width = 2800 - margin.left - margin.right;
    const height = 2000 - margin.top - margin.bottom;

    const svgLollipopPlot = container
      .append("svg")
      .attr(
        "viewBox",
        `0 0 ${width + margin.left + margin.right} ${height +
          margin.top +
          margin.bottom}`
      )
      .attr("class", "container__svg")
      .append("g")
      .attr("transform", `translate(${margin.left}, ${margin.top})`);

    var x = d3
      .scaleBand()
      .range([0, width])
      .domain(mass)
      .padding(1);
    svgLollipopPlot
      .append("g")
      .attr("class", "yxaxis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .selectAll("text")
      .attr("transform", "translate(-10,0)rotate(-45)")
      .style("text-anchor", "end");

    var y = d3
      .scaleLinear()
      .domain([0, max])
      .range([height, 0]);
    svgLollipopPlot
      .append("g")
      .attr("class", "yxaxis")
      .call(d3.axisLeft(y));

    const lollipop = svgLollipopPlot
      .selectAll("g.lollipop")
      .data(inten)
      .enter()
      .append("g")
      .attr("class", "lollipop")
      .on("mouseenter", d => {
        tooltip

          .style("opacity", "1")
          .style("top", `${d3.event.layerY}px`)
          .style("left", `${d3.event.layerX}px`)
          .html(`${d}`);
      })
      .on("mouseleave", () => tooltip.style("opacity", "0"));

    lollipop
      .selectAll("path")
      .data(cobweb)
      .enter()
      .append("line")
      .attr("x1", function(d) {
        return x(d.mz);
      })
      .attr("x2", function(d) {
        return x(d.mz);
      })
      .attr("y1", function(d) {
        return y(d.intensity);
      })
      .attr("y2", y(0))
      .attr("stroke", "grey");

    lollipop
      .selectAll("mycircle")
      .data(cobweb)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return x(d.mz);
      })
      .attr("cy", function(d) {
        return y(d.intensity);
      })
      .attr("r", "15")
      .style("fill", "green")
      .attr("stroke", "black");

    svgLollipopPlot.exit().remove();
  }
  render() {
    return <div className="container" />;
  }
}

export default LollipopChart;