Значок Svg кликабелен в любом браузере, кроме Firefox

Question

У меня есть значок SVG, который мы используем, чтобы пользователи могли добавлять отзывы к нашему сервису.Обычно пользователь нажимает на значок, и происходит событие onClick, и все работает нормально.Это поведение одинаково для всех браузеров, за исключением om firefox, где при нажатии SVG-рейтинга не запускается onClick.

Я попытался поместить onClick в тег SVG и тег g, и он отлично работает в сафари.Chrome и Opera, но ничего из этого не работает в Firefox.

const Rating = ({ color, onclick, ...props }) => (
  <svg id="Layer_1" viewBox="0 0 80 80" {...props}>
    <g className="st0" onClick={onclick}>
      <path className="st1" d="M0 0h80v80H0z" />
    </g>
    <path
      className={color}
      /* eslint max-len: ["error", 500] */
      d="M22.9 67.6c-.6 0-1.2-.2-1.8-.6-.9-.7-1.4-1.8-1.2-2.9l3-17.5-12.7-12.4c-.8-.8-1.1-2-.8-3.1.4-1.1 1.3-1.9 2.4-2l17.5-2.5 7.8-15.9c1-2 4.4-2 5.4 0l7.8 15.9L68 29.1c1.1.2 2.1 1 2.4 2s.1 2.3-.8 3.1L57 46.6 60 64c.2 1.1-.3 2.3-1.2 2.9-.9.7-2.1.8-3.2.2L40 59l-15.7 8.2c-.5.2-.9.4-1.4.4zm17.1-15c.5 0 1 .1 1.4.3L53.1 59l-2.2-13c-.2-1 .2-2 .9-2.7l9.5-9.2-13.1-1.9c-1-.1-1.8-.8-2.3-1.6L40 18.8l-5.8 11.9c-.4.9-1.3 1.5-2.3 1.6l-13.1 1.9 9.5 9.2c.7.7 1 1.7.9 2.7l-2.2 13L38.7 53c.3-.3.8-.4 1.3-.4z"
    />
  </svg>
)

Rating.propTypes = {
    color: PropTypes.string,
}

export default Rating

  <Rating
  key={_.uniqueId(i)}
  className="star-rating__star"
  onClick={() => this.rate(i)}
  viewBox="0 0 90 90"
  />

Я ожидаю, что событие onClick будет запущено при нажатии SVG, как это происходит в любом другом крупном браузере.

Обновление: после некоторой отладки в элементах проверки я обнаружил, что звезды не становятся кликабельными, потому что в одном контексте они отображаются внутри кнопки, даже если кнопка не имеет какого-либо события щелчка.