Uncaught Error: The Alan Button instance has already been created. There cannot be two Alan Button instances created at the same time

Question

I'm building an ecommerce store with a AI button using Alan AI.Ikeep getting the above error and I used Alan AI Error Uncaught Error: The Alan Button instance has already been created. There cannot be two Alan Button instances created at the same time but my code is still broken.Can anyone help me to see where I am going wrong. I want to be able to see my menu items when I use the button.Thanks

import { useState, useEffect } from "react";
import alanBtn from '@alan-ai/alan-sdk-web';



function App () {

  const[cart,setCart]= useState([])
  const [menuItems,setMenuItems] = useState([])

const Alan = () =>{
// // this shows the  AI button
useEffect(() => {
  function updateScreen(time) {
  alanBtn({
      key: '',
      onCommand: ({commandData}) => {
        if (commandData.command === 'getMenu') {
          // Call the client code that will react to the received command
        }
      }
    
  });
  requestAnimationFrame(updateScreen);
}},[]);



  const addToCart =(menuItem)=>{
    setCart((oldCart)=>{
      return [...oldCart, menuItem]
    })
  }



  return( <div className = "App"> 

  {menuItems.map((menuItem) =>(

    <li key = {menuItem.name}>
              {menuItem.name} - ${menuItem.price} -{menuItem.category}
              <button onClick={()=> addToCart(menuItem)}>add to cart</button>
    </li>

  ))}

  <div>
  <h2>Cart</h2>
  </div>

  {cart.map((cartItem) => (
    <li key ={cartItem.name}>
      {cartItem.name} - {cartItem.price} - {cartItem.category}
    </li>
    
  ))}
  </div>
  )}

   
};

export default App;```