BarChart Bug

barchart.js

import React from 'react';
import { BarChart, XAxis, YAxis, CartesianGrid, Tooltip, Bar, ResponsiveContainer } from 'recharts';
import classNames from 'classnames';

const BarChartWrapper = ({ color, ...otherProps }) => {
  const containerClass = classNames('barchart-container');

  return (
    <ResponsiveContainer>
      <BarChart {...otherProps}>
        <XAxis dataKey="name" axisLine={false} tick={xAxisStyles} tickLine={false} padding={{ left: 20, right: 20 }}/>
        <YAxis tick={{ fontSize: '0.625rem' }} tickLine={false} axisLine={false} interval={0} tickCount={6} domain={[0, 100]} />
        <CartesianGrid vertical={false} />
        <Tooltip/>
        <Bar dataKey="value" fill={color} />
      </BarChart>
    </ResponsiveContainer>
  );
};

export default BarChartWrapper;

test.js

import React from 'react';
import renderer from 'react-test-renderer';
import { BarChart } from '../';

describe('BarChart', () => {
  test('renders properly', () => {
    const data = [
      { name: 'A-1', value: 0 },
      { name: 'A-2', value: 10 },
      { name: 'A-3', value: 80 },
      { name: 'A-4', value: 60 },
      { name: 'A-5', value: 45 },
    ];

    const tree = renderer.create(
      <BarChart data={data} color="#ff6363" />
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });
});