Почему рандом в React работает так странно?

/* @flow */
import React from "react";
import { stringify as b } from "rebem-classname";
import { withLocalize } from "react-localize-redux";
import { Translate } from 'react-localize-redux';
import "./End.scss";

const block = "end";

function randomInteger(min, max) {
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}

let rands = randomInteger(1, 10);

class End extends React.PureComponent {

  props: {
    state: "WAITING" | "COUNTDOWN" | "CULMINATION" | "ENDED",
    winnerTicket: number,
    winner: ?{ id: number, username: string, avatar: string },
  };
      
  render() {
  const { state, winnerTicket, winner } = this.props;
    if (state === "ENDED") {
      status = (
        new Audio(`/sound/mainmenu.mp3`).play()
      );
    }

  return (
  <div className={b({ block, mods: { show: state === "ENDED" && !!winner } })}>
    <div  className={b({ block, elem: "winners" })}>
    <div className={b({ block, elem: "avatar" })}>
      <img className={b({ block, elem: "avatar-win" })} src={winner && winner.avatar} alt=""/>
    </div>
      <div className={b({ block, elem: "winners-info" })}>
        <div className={b({ block, elem: "winners-name" })}>
        &nbsp;
          <Translate>
            {({ translate }) => <lang>{translate("game.end")}</lang>}
          </Translate>
          </div>
        <div className={b({ block, elem: "winners-ticket" })}>
        <Translate>
            {({ translate }) => <lang>{translate("game.endticket")}</lang>}
        </Translate>
        : #{winnerTicket},
        &nbsp;
        <Translate>
            {({ translate }) => <lang>{translate("game.endticketwin")}</lang>}
        </Translate>
        <div className={b({ block, elem: "sound-win"})}>
          <img className={b({ block, elem: "image-win"})} src={`/sound/image/1.png`} />
          <span className={b({ block, elem: "sound-name"})}>{rands}</span>
        </div>
        </div>
      </div>
      <div className={b({ block, elem: "winners-footer" })}>
      <Translate>
        {({ translate }) => <lang>{translate("game.endwin")}</lang>}
      </Translate>
      &nbsp;
      <Translate>
        {({ translate }) => <lang>{translate("game.enddid")}</lang>}
      </Translate> ACE,&nbsp;
      <Translate>
        {({ translate }) => <lang>{translate("game.endkill")}</lang>}
      </Translate>!</div>
    </div>

  </div>
);
}
}
export default withLocalize(End);