'legends' argument is not being passed to the 'barLegends' function, in 'layers' in nivo/bar

[vikrantsingh47]

I am passing this function for 'legends' in the 'layers' for nivo/bar:

const BarLegend = ({ height, legends, width }) =>
  legends.slice(0, 7).map((legend) => (
    <BoxLegendSvg
      key={JSON.stringify(
        legend.data.map(({ id }) => {
          return id;
        })
      )}
      {...legend}
      containerHeight={height}
      containerWidth={width}
    />
  ));

(refer: https://github.com/plouc/nivo/issues/204)

i have updated @nivo/bar and @nivo/legends to latest version, but now i am getting an error saying "TypeError: legends is not iterable" after some debugging i found that 'legends' is undefined in the 'BarLegend' function above, which means that 'legends' is not being passed to the function. Can you please help with this, what could be the cause of this. fyi, i have also updated react to v 18

https://codesandbox.io/s/react-nivo-example-forked-hidxj Also, in the sandbox above, if you update the nivo/bar to the latest, you will get this error.