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 && (
<Wheel
outerBorderWidth={5}
spinDuration={[0.3]}
mustStartSpinning={mustSpin}
prizeNumber={prizeNumber}
data={data?.ruleta}
backgroundColors={backgroundColors}
radiusLineWidth={0}
radiusLineColor="transparent"
innerBorderColor="black"
outerBorderColor="yellow"
disableInitialAnimation={false}
onStopSpinning={() => {
setMustSpin(false);
setMessage(data?.ruleta[prizeNumber].message);
}}
/>
)}

<button
className={"btn-registro animate-pulse"}
onClick={() => {handleSpinClick()}}
disabled={mustSpin}
>
{mustSpin ? "Suerte" : "Girar"}

    </div>
  
  </div>

</div>

);
}

export default App;

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