pie chart with forwardLegendData 'Maximum update depth exceeded'

[kekovina]

Thanks for using nivo

you do a great job, i like your library

Describe/explain the bug
pie chart with forwardLegendData 'Maximum update depth exceeded'
i got flooding with Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. message
this interferes with other logic on the page, such as going through the menu to another route
my code is based on the story from the storybook

To Reproduce
nextjs 14, client component

'use client';
import React, { useState } from 'react';
import { LegendDatum, ResponsivePieCanvas } from '@nivo/pie';
import classNames from 'classnames';
import { useUnit } from 'effector-react';
import { $activeBreakpoint } from '@/shared/app-state';
import { Breakpoints } from '@/shared/types';

interface PieChartProps extends React.HTMLAttributes<HTMLDivElement> {
  data: any;
  size: number;
}
const PieChart: React.FC<PieChartProps> = ({ data, size, className, ...restedProps }) => {
  const [customLegend, setCustomLegend] = useState<LegendDatum<any>[]>([]);
  const [activeBreakpoint] = useUnit([$activeBreakpoint]);
  return (
    <div
      className={classNames('relative', className)}
      style={{
        height: size,
        width: size + 220,
        maxWidth: [Breakpoints.sm].includes(activeBreakpoint) ? 300 : 'unset',
      }}
      {...restedProps}
    >
      <div
        style={{ height: size + 20, width: size + 20, position: 'absolute', left: -10, top: -10 }}
      >
        <ResponsivePieCanvas
          data={data}
          innerRadius={0.8}
          padAngle={0.7}
          margin={{ top: size + 10, right: size + 10, bottom: size + 10, left: size + 10 }}
          cornerRadius={10}
          activeOuterRadiusOffset={8}
          enableArcLabels={false}
          enableArcLinkLabels={false}
          colors={{ datum: 'data.color' }}
          forwardLegendData={setCustomLegend}
          legends={undefined}
          tooltip={(point) => (
            <div className='bg-black/70 text-white rounded-xl px-2 py-1 w-48 text-center'>
              {point.datum.value}% ~{' '}
              <b style={{ color: point.datum.color }}>${point.datum.data.usdValue}</b>
            </div>
          )}
          theme={{
            tooltip: {
              container: {
                color: 'black',
              },
            },
          }}
        />
      </div>
      <div className='flex flex-col w-36 sm:w-52 text-sm sm:text-base absolute top-1/2 -translate-y-1/2 right-1 sm:-right-10'>
        {customLegend
          .sort((a, b) => b.data.value - a.data.value)
          .map((legend) => (
            <div key={legend.id} className='flex items-center justify-between'>
              <div className='flex items-center gap-2'>
                <div style={{ background: legend.color }} className='w-2 h-2 rounded-full'></div>
                <p>{legend.label}</p>
              </div>
              <p>{legend.data.value}%</p>
            </div>
          ))}
      </div>
    </div>
  );
};

Steps to reproduce the behavior:
just render component

Expected behavior
absence of this effect

Screenshots

Desktop (please complete the following information):

• OS: windows 10
• Browser YandexBrowser
• Version 24.7.6.974 (64-bit)

Additional context
react devtools screen

I looked at the code, found a place where forwardLegendData is used, I think there is a bug somewhere