react 18.3 error

[leineveber]

Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, data: ..., side: ..., minHeight: ..., sideWidth: ..., labelWidth: ..., isThreeD: ..., isAnimated: ..., animationDuration: ..., animatedHeight: ..., appearingOpacity: ..., roundedTop: ..., roundedBottom: ..., frontColor: ..., sideColor: ..., topColor: ..., cappedBars: ..., capThickness: ..., capColor: ..., capRadius: ..., autoShiftLabels: ..., barMarginBottom: ..., barStyle: ..., item: ..., index: ..., containerHeight: ..., maxValue: ..., spacing: ..., propSpacing: ..., xAxisThickness: ..., barWidth: ..., opacity: ..., disablePress: ..., rotateLabel: ..., showXAxisIndices: ..., xAxisIndicesHeight: ..., xAxisIndicesWidth: ..., xAxisIndicesColor: ..., horizontal: ..., rtl: ..., intactTopLabel: ..., showValuesAsTopLabel: ..., topLabelContainerStyle: ..., topLabelTextStyle: ..., barBorderWidth: ..., barBorderColor: ..., barBorderRadius: ..., barBorderTopLeftRadius: ..., barBorderTopRightRadius: ..., barBorderBottomLeftRadius: ..., barBorderBottomRightRadius: ..., barInnerComponent: ..., color: ..., showGradient: ..., gradientColor: ..., barBackgroundPattern: ..., patternId: ..., onPress: ..., onLongPress: ..., onPressOut: ..., focusBarOnPress: ..., focusedBarConfig: ..., xAxisTextNumberOfLines: ..., xAxisLabelsHeight: ..., xAxisLabelsVerticalShift: ..., renderTooltip: ..., leftShiftForTooltip: ..., initialSpacing: ..., selectedIndex: ..., setSelectedIndex: ..., activeOpacity: ..., noOfSectionsBelowXAxis: ..., leftShiftForLastIndexTooltip: ..., label: ..., labelTextStyle: ..., pointerConfig: ..., yAxisExtraHeightAtTop: ..., yAxisOffset: ...};
  <RenderBars {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {data: ..., side: ..., minHeight: ..., sideWidth: ..., labelWidth: ..., isThreeD: ..., isAnimated: ..., animationDuration: ..., animatedHeight: ..., appearingOpacity: ..., roundedTop: ..., roundedBottom: ..., frontColor: ..., sideColor: ..., topColor: ..., cappedBars: ..., capThickness: ..., capColor: ..., capRadius: ..., autoShiftLabels: ..., barMarginBottom: ..., barStyle: ..., item: ..., index: ..., containerHeight: ..., maxValue: ..., spacing: ..., propSpacing: ..., xAxisThickness: ..., barWidth: ..., opacity: ..., disablePress: ..., rotateLabel: ..., showXAxisIndices: ..., xAxisIndicesHeight: ..., xAxisIndicesWidth: ..., xAxisIndicesColor: ..., horizontal: ..., rtl: ..., intactTopLabel: ..., showValuesAsTopLabel: ..., topLabelContainerStyle: ..., topLabelTextStyle: ..., barBorderWidth: ..., barBorderColor: ..., barBorderRadius: ..., barBorderTopLeftRadius: ..., barBorderTopRightRadius: ..., barBorderBottomLeftRadius: ..., barBorderBottomRightRadius: ..., barInnerComponent: ..., color: ..., showGradient: ..., gradientColor: ..., barBackgroundPattern: ..., patternId: ..., onPress: ..., onLongPress: ..., onPressOut: ..., focusBarOnPress: ..., focusedBarConfig: ..., xAxisTextNumberOfLines: ..., xAxisLabelsHeight: ..., xAxisLabelsVerticalShift: ..., renderTooltip: ..., leftShiftForTooltip: ..., initialSpacing: ..., selectedIndex: ..., setSelectedIndex: ..., activeOpacity: ..., noOfSectionsBelowXAxis: ..., leftShiftForLastIndexTooltip: ..., label: ..., labelTextStyle: ..., pointerConfig: ..., yAxisExtraHeightAtTop: ..., yAxisOffset: ...};
  <RenderBars key={someKey} {...props} />
    in BarAndLineChartsWrapper (created by BarChart)
    in BarChart (created by GroupedBarChart)
    in RCTView (created by View)
    in View
    in View (created by GroupedBarChart)
    in RCTView (created by View)
    in View (created by Pressable)
    in Pressable (created by Pressable)
    in GroupedBarChart (created by BloodAnalysisResults)
    in RCTView (created by View)
    in View

[devevecare]

+1 I am facing the same issue