Probleme boite à dialogue avec react headless ui

// ProductComponent.js
import React, { useState , Fragment }  from 'react';
import { Dialog, Transition } from '@headlessui/react';
import CommandeForm from './CommandeForm';

const ProductComponent = ({ product }) => {
  const [afficheCommandeForm, setAfficheCommandeForm] = useState(false);
  const [fromButton, setFromButton] = useState(null);
  const handleCommandeClick = () => {

      setAfficheCommandeForm(true);
      setFromButton('closeButton');

  };

  const handleCloseCommandeForm = () => {

    setAfficheCommandeForm(false);
    setFromButton(null);
  };

  return (
    <div className=" flex flex-col gap-2 relative">
      <img src={`images/${product.image}`} className="w-full h-auto " alt={product.name} />

      {/* Bouton Commander positionné en haut à droite */}
      {product.id === 5 ? (
        <button className="bottom-center" onClick={handleCommandeClick}>
          Commander
        </button>
      ) : (
        <button className="commander-button" onClick={handleCommandeClick}>
          Commander
        </button>
      )}

      {afficheCommandeForm && (
        <Transition show={afficheCommandeForm} as={Fragment} >
          <Dialog
            as="div"
            className="fixed inset-0 z-10 overflow-y-auto"
            onClose={handleCloseCommandeForm}
          >
            <div className="min-h-screen px-4 text-center">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0"
                enterTo="opacity-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
              >
                <Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-30" />
              </Transition.Child>

              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                            <div className="inline-block align-middle my-10 p-6 max-w-md w-full bg-white shadow-xl rounded-md">
              <Dialog.Title className="text-lg font-medium text-gray-900 mt-4">
                Formulaire de commande
              </Dialog.Title>
              <Dialog.Description className="mt-2 text-sm text-gray-500">
                Contenu du formulaire de commande...
              </Dialog.Description>

              {/* Votre contenu de formulaire ici */}
              <CommandeForm product={product} onClose={handleCloseCommandeForm} />

              <div className="mt-4">
                <button
                  type="button"
                  onClick={handleCloseCommandeForm}
                  className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-transparent rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                >
                  Fermer
                </button>
              </div>
            </div>
              </Transition.Child>
            </div>
          </Dialog>
        </Transition>
      )}
    </div>
  );
};

export default ProductComponent;