blink in mobile

[Jose-DR21]

I am trying to implement the component and it works fine but in mobile view it has unwanted flickering. i tried to integrate it in my nextjs project and also in a separate project in react vanilla and in both cases it gives the same flickering.

Code react vanilla

import { useState } from "react"; import { Wheel } from "react-custom-roulette";

import "./App.css";

const data = { ruleta: [ { id: 0, option: "5%", probabilidad: [1, 5], message: "Congratulations0", }, //5% { id: 1, option: "10%", probabilidad: [6, 15], message: "Congratulations1", }, // 10% { id: 2, option: "15%", style: { textColor: "#000" }, probabilidad: [16, 30], message: "Congratulations2", }, //15% { id: 3, option: "30%", probabilidad: [31, 60], message: "Congratulations3", }, //30% { id: 4, option: "40%", style: { textColor: "#000" }, probabilidad: [61, 100], message: "Congratulations4", }, //40% ], }; const ruletaStart = async () => { let min = 1; let max = 100;

const numero = Math.floor(Math.random() * (max - min + 1) + min);

const respuesta = data?.ruleta?.filter((x) => { if (numero >= x.probabilidad[0] && numero <= x.probabilidad[1]) { return x; } }); return respuesta[0].id; };

function App() { const [mustSpin, setMustSpin] = useState(false); const [prizeNumber, setPrizeNumber] = useState(0); const [message, setMessage] = useState(""); const backgroundColors = ["red", "blue", "white", "blue", "white"];

const handleSpinClick = async () => { if (!mustSpin) { let resp = await ruletaStart();

  setPrizeNumber(resp);
  setMustSpin(true);
}

};

return (

{data && ( { setMustSpin(false); setMessage(data?.ruleta[prizeNumber].message); }} /> )}

{handleSpinClick()}} disabled={mustSpin} > {mustSpin ? "Suerte" : "Girar"}

); }

export default App;

deploy in vercel : https://ruleta-vite.vercel.app/