Html – alert shows twice in react js

I have a puzzle game and it shows an alert once you are finished and then a confirm window asking if you want to solve another one. The problem that it shows this twice. I tried changing my index.js and remove the StrictMode but then it shows me "ResizeObserver loop completed with undelivered notifications." warning and the app doesn’t work like it was with StrictMode

my App.js

import React, { useState } from "react";
import "./App.css";
import "./puzzle.css";
import { JigsawPuzzle } from "react-jigsaw-puzzle/lib";
import "react-jigsaw-puzzle/lib/jigsaw-puzzle.css";
import catImg from "./cat.jpeg";
import elephantImg from "./elephant.jpg";
import carImg from "./car.jpg";
import kidsImg from "./kids.jpg";
import sheepImg from "./sheep.png";

const puzzleImages = [catImg, elephantImg, carImg, kidsImg, sheepImg];

function App() {
  const [imageIndex, setImageIndex] = useState(getRandomIndex());

  function getRandomIndex() {
    return Math.floor(Math.random() * puzzleImages.length);
  }

  const handlePlayAgain = () => {
    const confirmPlayAgain = window.confirm("Do you want to play another puzzle?");
    if (confirmPlayAgain){
    const newIndex = getRandomIndex();
    setImageIndex(newIndex);
}
else { 
    alert("Thank you for playing")
}
  };

  const handleSolved = () => {
    alert("Good job!");
    handlePlayAgain();
  };

  return (
    <>
      <h2 className="tag">Un-puzzle the pieces</h2>
      <JigsawPuzzle
        imageSrc={puzzleImages[imageIndex]}
        rows={2}
        columns={2}
        onSolved={handleSolved}
        className="jigsaw-puzzle"
      />
    </>
  );
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();