Mouse hover and click events not working on svg because of foreignObject

I have graph generated for showing HOS logs and is built using svg, line , rect etc. I have added some functionality in it when I mouse is hover on a log on svg the background highlights and when click on log on svg it shows log details. Now I added a range slider in it by using foreignobject in svg , the slider settled well and is confined within svg width and moving perfectly fine in it but because of that foreign object the hover and click events of mouse aren’t working on it, seems like there is layer on svg because of slider/ForeignObject which is blocking this thing.

I tried to put the slider on that svg by setting it’s position absolute but the position of slider get’s disturbed each time the svg is resized on different screen sizes.The whole code is in React js.

Here’s the code implemented

<svg width="100%" height="30vh" viewBox="-36 60 1525 10" xmlns="http://www.w3.org/2000/svg">
      <g fontFamily="roboto">{GettopLabel()}</g>
     
      <g id="bars">
        <rect key="react1" height="40px" width="94.39%" y="0" x="0" stroke="#C9CCCE" fill="#fff" />
        <rect key="react2" height="40px" width="94.39%" y="40" x="0" stroke="#C9CCCE" fill="#f0f0f5" />
        <rect key="react3" height="40px" width="94.39%" y="80" x="0" stroke="#C9CCCE" fill="#fff" />
        <rect key="react4" height="40px" width="94.39%" y="120" x="0" stroke="#C9CCCE" fill="#f0f0f5" />
      </g>
      <g>
        {Array(23)
          .fill('')
          .map(() => GetVerticalLine())}
      </g>
      <g>
        {Array(4)
          .fill('')
          .map((item, index) => {
            const lines = Array(24)
              .fill('')
              .map(() => {
                const smallLines = Array(11)
                  .fill('')
                  .map((smLn, smLnInd) => getSmallVerticalLine(smLnInd === 5, index + 1));

                getSmallVerticalLineSpace();

                return smallLines;
              });
            resetCounter();
            return lines;
          })}
      </g>
      <g>
        {graphLinesData &&
          graphLinesData?.map((data: any, index: number) => (
            <React.Fragment key={`id_${index + 1}`}>
              <rect
                className="highlight-rect"
                x={Math.min(data?.horizLn.x1, data?.horizLn.x2)}
                y={0}
                width={data?.horizLn.x2 - data?.horizLn.x1}
                height="160px"
                fill="transparent"
                onClick={() =>
                  setSelectedLog(records[index]!, records[index + 1] ? records[index + 1]?.eventTime! : '235959')
                }
                onMouseEnter={() => setHighlightedLog(records[index]!)}
                onMouseLeave={() => setHighlightedLog(null)}
              />
              <line
                x1={data?.horizLn.x1}
                x2={data?.horizLn.x2}
                y1={data?.horizLn.y1}
                y2={data?.horizLn.y2}
                stroke="#2B5F8C"
                fill="#2B5F8C"
                strokeWidth={5}
              // onMouseOver={() => console.log("mouseUIn", records[index])}
              // onMouseOut={() => console.log("mouseOut", data)}
              />
              <line
                x1={data?.vertLn?.x1}
                x2={data?.vertLn?.x2}
                y1={data?.vertLn?.y1}
                y2={data?.vertLn?.y2}
                stroke="#2B5F8C"
                fill="#2B5F8C"
                strokeWidth={2}
              />
            </React.Fragment>
          ))}
      </g>
      {violations &&
        convertedDate === violations[0]?.startedAt?.eventDate &&
        violations.length > 0 &&
        violations?.map((item: Violation, index: number) => {
          let endedAtEventDate: string;
          let endedAtEventTime: string;
          if (item.endedAt.eventDate) {
            endedAtEventDate = item.endedAt.eventDate;
          } else if (convertedDate === currentDate) {
            endedAtEventDate = currentDateInZone.format(DEFAULT_EVENT_MMDDYY);
          } else {
            endedAtEventDate = convertedDate;
          }
          if (item.endedAt.eventTime) {
            endedAtEventTime = item.endedAt.eventTime;
          } else if (convertedDate === currentDate) {
            endedAtEventTime = currentDateInZone.format('HHmmss');
          } else {
            endedAtEventTime = '235959';
          }

          if (item?.startedAt?.eventDate !== convertedDate) {
            return null;
          }

          const x1 = convertUnixToMinutes(item?.startedAt?.eventDate, item?.startedAt?.eventTime);
          const x2 = convertUnixToMinutes(endedAtEventDate, endedAtEventTime);
          const y1 = getLnStartingPoint('3') - slightlyBiggerLineHeight - horizontalLineBottomMarg;
          const y2 = getLnStartingPoint('3') - slightlyBiggerLineHeight - horizontalLineBottomMarg;
          return (
            <line
              key={`id_${index + 1}`}
              x1={x1}
              x2={x2}
              y1={y1}
              y2={y2}
              stroke="#f2163e"
              fill="#2B5F8C"
              strokeWidth={5}
            />
          );
        })}
     
   

      <foreignObject width="100%" height="220px" x={-38} y={-36}>
        <Slider
          range
          tooltip={{
            open: true,
          }}
          tipFormatter={value => `${moment().startOf('day').add({ seconds: value }).format(HOURS_MINUTES_SMALL_A)}`}
          className={visibleSelectorClass}
          min={0}
          max={86399}
          value={[timeFrom!, timeTo!]}
          onChange={onChangeSlider}
        />
      </foreignObject>
    </svg>