Issue with custom action not resetting variables when switching microsites

import React, {useState} from "react";
import {RocketIcon} from '@sanity/icons'
let siteName;
let hookId;
let baseHookUrl = "<https://api.netlify.com/build_hooks/>";
let postUrl;

export function PublishMicrositeAction(props) {
    let micrositeId = props.id;

    if (micrositeId == "abc") {
        siteName = "Publishing Root Site";
        hookId = "123abc";
        postUrl = `${baseHookUrl}${hookId}`;
    }
    if (micrositeId == "def") {
        siteName = "Publishing Essentials";
        hookId = "456def";
        postUrl = `${baseHookUrl}${hookId}`;
    }
    if (micrositeId == "ghi") {
        siteName = "Publishing Foundations";
        hookId = "789ghi";
        postUrl = `${baseHookUrl}${hookId}`;
    }
    
    console.log(micrositeId)

    const [isDialogOpen, setIsDialogOpen] = useState(false)

    if (props.type !== 'microsite') {
        return null
    }

    function formSubmit() {
        var request = new XMLHttpRequest();
        request.open('POST', postUrl, true);
        request.onload = function() { // request successful
        // we can use server response to our request now
          console.log(request.responseText);
        };
      
        request.onerror = function() {
          // request failed
        };
      
        request.send(new FormData(event.target)); // create FormData from form that triggered event
        event.preventDefault();

        setIsDialogOpen(false)
    }
      
    return {
      label: "Publish Microsite",
      icon: RocketIcon,
      onHandle: () => setIsDialogOpen(true),    
      dialog: isDialogOpen && {
          type: 'modal',
          onClose:  () => setIsDialogOpen(false),
          content: <div id="modal"  style={{paddingBottom: 30 + 'px'}}>
          <h3>{siteName}</h3>
          <p>Please enter a brief description of what was changed.</p>
          <form id="publishForm" onSubmit={formSubmit}>
          <label for="trigger_title">Message: </label>
          <input type="text" id="trigger_title" name="trigger_title"/>
          <button id="submitBtn" type="submit" style={{marginLeft: 10 + 'px'}}>Publish</button>
          </form>
          </div>
      }
    }
  }