Nivo Pie Chart - Custom Arc Labels

Question

I have a nivo pie chart in my react application. In this particular pie chart, there are quite a few data points. As such, when the enableArcLinkLabels is true, it looks very messy. I'd like to show the arcLinkLabels only onMouseEnter of each data point. I tried the below to reach my output, but this simply does not work.

Simply, I only want the arcLinkLabel to show for the part of the pie chart that is being hovered over.

import React from 'react';
import { ResponsivePie } from '@nivo/pie'

const PieChart = ({ pieChartData }) => {
    const [hoveredSegment, setHoveredSegment] = React.useState(null);

    return (
        <ResponsivePie
            data={pieChartData}
            innerRadius={0.5}
            padAngle={2}
            arcLabel={null}

            enableArcLinkLabels={(d) => d.id === hoveredSegment}

            onMouseEnter={(event, props) => {
                setHoveredSegment(props.id);
            }}

            onMouseLeave={(event, props) => {
                setHoveredSegment(null);
            }}
        />
    )
}

export default PieChart;