<Bar
          key={dataKey}
          dataKey={dataKey}
          stackId={stackId}
          radius={0}
          stroke='none'
          strokeWidth={0}
          isAnimationActive
          shapeRendering='crispEdges'
          yAxisId={yAxisId}
          mask={variant === 'dashed' ? `url(#${BAR_BG_PATTERN_STRIPED_MASK_ID})` : undefined}
        >
          {data.map((dataItem, index) => (
            <Cell
              key={`bar-${index}`}
              fill={
                activeBarName === dataItem.name
                  ? basicColorsConfig[activeBarBackground]
                  : basicColorsConfig[barBackground]
              }
              style={{
                transition: 'fill 0.3s ease-in-out',
              }}
            />
          ))}
</Bar>