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