How can I use a custom layer for each bar using a nivochart

Question

I would like to be able to provide a custom layer on each of my bars in a Nivo responsive bar chart. I have been using this guide as a reference. I am creating a warning level and would like to have a line representing that level set on each bar. The issue I have is that the level is moving around when resizing the page.

The expected response upon screen resizing is for the warning level line to retain its expected position on the chart. What I am getting instead is the warning line moving from its desired position.

"next": "~12.2.4", "@nivo/bar": "~0.79.1", "@nivo/core": "~0.78.0",

My chart component using mock data -

import CardComponent from '@components/CardComponent';
import NivoWrapper from '@components/NivoWrapper';
import {
  ResponsiveBar,
} from '@nivo/bar';
import React from 'react';

const data = [
  {
    x: '0',
    name: 'weight5',
    current: 200,
    warningLevel: 100,
  },
  {
    x: '1',
    name: 'weight2',
    current: 300,
    warningLevel: 150,
  },
  {
    x: '2',
    name: 'weight3',
    current: 400,
    warningLevel: 200,
  },
  {
    x: '3',
    name: 'weight4',
    current: 500,
    warningLevel: 250,
  },
  {
    x: '4',
    name: 'weight5',
    current: 600,
    warningLevel: 300,
  },

];

const MarginTop = 0;
const Marginright = 24;
const Marginbottom = 24;
const Marginleft = 64;

function Line({ bars, xScale }) {
  return (
      {bars.map((bar: any) => {
        return (
          <line
            key={bar.key}
            y1={bar.absY}
            y2={bar.absY + bar.height}
            x1={xScale(bar.width - bar.data.data.warningLevel - bar.data.data.warningLevel)}
            x2={xScale(bar.width - bar.data.data.warningLevel - bar.data.data.warningLevel)}
            stroke="black"
          />
        );
      })}
  );
}

function PackageStockLevelChart() {
  return (
      <NivoWrapper>
        <ResponsiveBar
          data={data}
          indexBy="name"
          keys={['current']}
          layout="horizontal"
          enableLabel={false}
          axisLeft={{
            tickValues: 7,
          }}
          margin={{
            top: MarginTop, right: Marginright, bottom: Marginbottom, left: Marginleft,
          }}
          enableGridY={false}
          colors="green"
          legendLabel="legend label"
          legends={[{
            dataFrom: 'keys',
            anchor: 'bottom-right',
            direction: 'column',
            itemWidth: 80,
            itemHeight: 16,
            translateY: -16,
          }]}
          layers={['axes', 'bars', Line, 'legends']}
        />
      </NivoWrapper>
  );
}

export default PackageStockLevelChart;

View before resizing -

---

View before resizing

During / After resizing

View during after reszing