Carousel component implemented in React

CarouselComponent.jsx

import React from 'react';
import PropTypes from 'prop-types';
import CarouselButton from './CarouselButton';

const Carousel = ({ children }) => {
  const scroll = direction => {
    const carousel = document.querySelector('#carousel');
    const step = 30; // scrolling by 30px

    carousel.scrollTop =
      direction === 'up'
        ? carousel.scrollTop - step
        : carousel.scrollTop + step;

    if (carousel.scrollTop === 0) {
      // start
      // dispatch disable arrow up
    } else {
      // dispatch enable
    }

    if (carousel.scrollTop === carousel.scrollHeight - carousel.clientHeight) {
      // dispatch disable arrow down
    } else {
      // dispatch enable
    }
  };

  return (
    <div id="carousel" className="extra-fields__carousel">
      {children}
      <CarouselButton
        icon="carousel_arrow"
        className="arrow-prev"
        onClick={() => scroll('up')}
      />
      <CarouselButton
        icon="carousel_arrow"
        className="arrow-next"
        onClick={() => scroll('down')}
      />
    </div>
  );
};

Carousel.propTypes = {
  children: PropTypes.node.isRequired
};

export default Carousel;