How to align Nivo Bar chart label position to end of bar?

Hi I am trying to align the labels of my bar chart to the far right of the bar but haven’t been able to do so yet. The docs for Nivo Bar suggests I use a labelPosition="end" property but on my code apparently, it does not exist.

Here is my current output

CURRENT OUTPUT

As you can see the labels are centred inside the bars, whereas the design its at the outside end of the bars.

Here is the design I need to follow

DESIGN

Below is my current code

import { ResponsiveBar, type ComputedDatum } from '@nivo/bar'
import { useTheme } from '@nivo/core'
import { Card } from 'antd'

 <Card
        title={`${direction} ${data?.length ?? 20} ${metric} by total units`}
        style={{ boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.2)' }}
        bodyStyle={{
          height: '800px',
          padding: '32px',
        }}
        loading={isLoading}
      >
        <ResponsiveBar
          data={data ?? []}
          margin={{ top: 0, right: 15, bottom: 30, left: leftMargin }}
          padding={0.4}
          colors="#0E8156"
          layout="horizontal"
          isInteractive={true}
          axisTop={null}
          axisBottom={{
            tickSize: 4,
            tickPadding: 4,

            legend: 'units',
            legendPosition: 'middle',
            legendOffset: 40,
          }}
          axisLeft={{
            renderTick: ({ tickIndex, x, y }) => (
              <LeftTick
                x={x}
                y={y}
                text={data?.[tickIndex]?.name ?? ''}
                id={data?.[tickIndex]?.id ?? 0}
              />
            ),
          }}
          labelPosition="end" // PROP I AM TRYING TO USE BUT ERROR
          labelSkipWidth={12}
          labelSkipHeight={12}
          labelTextColor={{ from: 'color', modifiers: [['brighter', 10.0]] }}
          animate={true}
          onClick={handleSetQuery}
        />
      </Card>

//ERROR Property 'labelPosition' does not exist on type 'IntrinsicAttributes & ResponsiveBarSvgProps<{ value: number; id: number; name: string; }>'.ts(2322)

Here is my package.json

"@nivo/bar": "^0.87.0",
"@nivo/calendar": "^0.87.0",
"@nivo/core": "^0.87.0",

Has anyone come across this error? Nivo docs seems to be giving incorrect prop information if they say to use labelPosition which doesn’t exist, or maybe I am using the wrong version. Is there any fix for this? Thanks