How to remove the the previous instance created in React useEffect()

This is my useEffect().I am making a website using React and alan voice recognition. What this useEffect() does is when someone enters the country it creates an alanBtn which is basically a button.Now the problem is that when the user selects another country the previous button stays on the page and on top of it a new button is made. What I want to do is whenever a user selects a different country it destroys the previous button instance and then creates new one.

useEffect(() => {
    alanbtn({
      key: alanKey,
      onCommand: ({ command, articles, number }) => {
        if (command === "newHeadlines") {
          setNewsArticles(articles);
          setActiveArticle(-1);
        } else if (command === "highlight") {
          setActiveArticle((prevValue) => prevValue + 1);
        } else if (command === "open") {
          const parseNumber =
            number.length > 2
              ? wordsToNumbers(number, { fuzzy: true })
              : number;

          const article = articles[parseNumber - 1];
          if (parseNumber > 20) {
            alanbtn().playText("Please try that again");
          } else if (article) {
            window.open(article.url, "_blank");
            alanbtn().playText("Opening...");
          }
        }
      },
    }).setVisualState({ answer: country });
  }, [country]);

The country is passed as prop to this component.