How can I add a custom button in a React rich text editor that shows/hides an image when clicked?

Question

I am working on a React application and using jodit-react toolbars to allow users to add and edit content. I want to add a custom button to the toolbar that, when clicked, inserts an image and allows users to toggle the visibility of the image (i.e., show or hide the image on the same button click).

I've tried using jodit-react, but I am not seeing the desired result. Here's the code I've written so far:

    extraButtons: [
      {
        name: "addImageButton",
        iconURL: "https://cdn-icons-png.flaticon.com/512/1828/1828936.png",
        tooltip: "Add Button with Image",
        exec: function (editor) {
          const fileInput = document.createElement("input");
          fileInput.type = "file";
          fileInput.accept = "image/*";
          fileInput.style.display = "none";

          document.body.appendChild(fileInput);

          fileInput.click();

          fileInput.onchange = async function (event) {
            const file = event.target.files[0];

            if (file) {
              async function uploadImageToDatabase() {
                const formData = new FormData();
                formData.append("image", file);
                const imageUrl = axios
                  .post("/api/v1/uploads/image", formData)
                  .then((res) => {
                    return res.data.baseurl;
                  });

                return imageUrl;
              }

              const imageUrl = await uploadImageToDatabase().then((url) => url);

              console.log(imageUrl);

              editor.selection.insertHTML(`
                <button type="button" class="show-image-button">
                  See Hint
                  </button>
                  <img src="${imageUrl}" alt="image" style="display: none;width: 200px;height:200px" />    
              `);

              const buttons =
                editor.editor.querySelectorAll(".show-image-button");
              const button = buttons[buttons.length - 1]; // Get the most recently inserted button
              button.addEventListener("click", () => {
                const image = button.nextElementSibling;
                if (image.style.display === "none") {
                  image.style.display = "block";
                } else {
                  image.style.display = "none";
                }
              });

            }
          };
        },
      },
    ],

When I click on the image. It should show the image.