React component with CSS modules

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from '../common/Icon';
import NavigationSteps from './NavigationSteps';

// Import Styles
import styles from './Header.css';

class Header extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      isBackLinkHovered: false,
    };

    this.onBackLinkMouseEnter = this.onBackLinkMouseEnter.bind(this);
    this.onBackLinkAnimationEnd = this.onBackLinkAnimationEnd.bind(this);
  }

  componentDidMount() {
    this.backLink.addEventListener('animationend', this.onBackLinkAnimationEnd);
    this.backLink.addEventListener('webkitAnimationEnd', this.onBackLinkAnimationEnd);
    this.backLink.addEventListener('MSAnimationEnd', this.onBackLinkAnimationEnd);
    this.backLink.addEventListener('oAnimationEnd', this.onBackLinkAnimationEnd);
  }
  componentWillUnmount() {
    this.backLink.removeEventListener('animationend', this.onBackLinkAnimationEnd);
    this.backLink.removeEventListener('webkitAnimationEnd', this.onBackLinkAnimationEnd);
    this.backLink.removeEventListener('MSAnimationEnd', this.onBackLinkAnimationEnd);
    this.backLink.removeEventListener('oAnimationEnd', this.onBackLinkAnimationEnd);
  }

  onBackLinkMouseEnter() {
    this.setState({ isBackLinkHovered: true });
  }

  onBackLinkAnimationEnd() {
    this.setState({ isBackLinkHovered: false });
  }

  render() {
    const { backText, backHref, logoText, logoHref } = this.props;

    return (
      <header className={styles.header} role="banner">
        <nav className={styles.navigation}>
          <div className={styles['navigation-inner']}>
            <div className={styles.menus}>
              <ul className={styles.menu} role="menu">
                <li className={styles.back} role="menuitem">
                  <a
                    href={backHref}
                    className={this.state.isBackLinkHovered ? 'is-hovered' : ''}
                    onMouseEnter={this.onBackLinkMouseEnter}
                    ref={(a) => { this.backLink = a; }}
                  >
                    <Icon type="pointer-left" />
                    <span className={styles.text}>
                      {backText}
                    </span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div className={styles.logo}>
          <h1>
            <a href={logoHref}>
              <span className={styles.text}>
                {logoText}
              </span>
              <Icon type="logo" />
            </a>
          </h1>
        </div>
        <NavigationSteps steps={this.props.steps} />
      </header>
    );
  }
}

Header.propTypes = {
  steps: PropTypes.array.isRequired,
  backText: PropTypes.string.isRequired,
  backHref: PropTypes.string.isRequired,
  logoText: PropTypes.string.isRequired,
  logoHref: PropTypes.string.isRequired,
};

export default Header;