return a custom img tag when image in uploaded TinyMCE

Question

when an image is uploaded I changed it to a File type and passed it on to my back end server RestAPI and the image is uploaded properly but in my Editor content, the image is stored as blob even though I returned an img tag with the src file path I want it to show.

How can I put a custom img tag once the axios fetch has been completed?

I need the <img> tag to return as this:

<img src="/reviewImgs/whateverFileNameItIs" />

but it keeps returning as this:

<img src="blob:http://localhost:3000/2ba52ae5-d17b-45d2-bd69-3451cb5425af">

this is my return Editor config:

  return (
    <Editor
      apiKey='iokd75awv5mkifdb3j4qp387rw27smpbjgoawllblis65mrq'
      init={{
        plugins: 'ai tinycomments mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen footnotes advtemplate advtable advcode editimage tableofcontents mergetags powerpaste tinymcespellchecker autocorrect a11ychecker typography inlinecss',
        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
        tinycomments_mode: 'embedded',
        tinycomments_author: 'Author name',
        mergetags_list: [
          { value: 'First.Name', title: 'First Name' },
          { value: 'Email', title: 'Email' },
        ],
        images_uploadc_handler: (blobInfo, success, failure, event) => {
          imageFileHandler(blobInfo, success, failure, event);
        },
        images_upload_url: 'postAcceptor.php',
        images_upload_base_path: '/reviewImgs',
        selector: 'textarea',
        language: 'ko_KR',
        ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),
      }}
      initialValue={initialContent}
      onEditorChange={handleEditorChange}
    />
  );

and this is my fileHandler code:

const imageFileHandler = (blobInfo, success, failure, event) => {
    // Prevent the default form submission behavior
    event.preventDefault();
  
    // Create a FormData object and append the file to it
    const formData = new FormData();
    formData.append('imageFile', blobInfo.blob(), blobInfo.filename());
  
    // Assuming you have a REST API endpoint for uploading images
    fetch('http://localhost:8001/reviews/imageUpload', {
      method: 'POST',
      body: formData,
    })
      .then(response => {
        if (!response.ok) {
          throw new Error('Image upload failed');
        }
        return response.json(); // Parse the response as JSON
      }).then(res => res.data)
      .then(data => {
        // Assuming your server returns the original file name
        const imageUrl = `/reviewImgs/${data.fileName}`;
  
        // Construct a custom img tag
        const imgTag = `<img src="${imageUrl}" alt="Uploaded Image" />`;
  
        // Pass the custom img tag to the success callback
        success(imgTag);
      })
      .catch(error => {
        console.error('Error uploading image:', error);
        failure('Error handling image');
      });
  };