Roullete Spinner made with React Hooks

Spinner.js

  const spinWheel = useCallback(() => {
    // Receives the winner prop and search for his position in the spinner bets array
    const order = [8, 1, 14, 2, 13, 3, 12, 4, 0, 11, 5, 10, 6, 9, 7];
    const position = order.indexOf(winner);

    // Determine position where to land
    const rows = 12;
    const card = 80 + 2 * 2;
    let landingPosition = rows * 15 * card + position * card;

    const randomize = Math.floor(Math.random() * 85) - 85 / 2;
    landingPosition += randomize;

    const axes = {
      x: Math.floor(Math.random() * 50) / 100,
      y: Math.floor(Math.random() * 20) / 100,
    };

    wheelRef.current.style.transitionTimingFunction = `all 6000ms cubic-bezier(0,${axes.x},${axes.y},1)`;
    wheelRef.current.style.transitionDuration = `6s`;
    wheelRef.current.style.transform = `translate3d(-${landingPosition}px, 0px, 0px)`;

    setTimeout(() => {
      wheelRef.current.style.transitionTimingFunction = '';
      wheelRef.current.style.transitionDuration = '';
      const resetTo = -(position * card + randomize);
      wheelRef.current.style.transform = `translate3d(${resetTo}px, 0px, 0px)`;
    }, 7000);
  }, [winner]);

  useEffect(() => {
    if (rolling) {
      spinWheel();
    }
  }, [rolling, spinWheel]);

  const rows = useMemo(() => {
    const result = [];
    const row = order => (
      <Row key={order}>
        {spinner.map((ticket, key) => (
          <Counter key={String(key)} id={`ticket-${ticket}`} ticket={ticket}>
            {ticket}
          </Counter>
        ))}
      </Row>
    );

    for (let x = 0; x < 29; x += 1) {
      result.push(row(x));
    }

    return result;
  }, []);