I am working on a nextJS project and am trying to use react-quill package as a rich text editor. I am using quill-image-uploader to handle uploaded images by uploading it to Firestore and then using the URL of.. the problem is when the image is uploaded .. the editor tries to convert It to base 64 and then viewing it instead of using the URL which causes the output to be like <img src=[object Object]> instead of <img src="HTTP://...>

here is a snippet of my code :

Quill.register('modules/imageUploader', ImageUploader);

const uploadInBodyImage = async (image) => {
  console.log("started to uploadImage function");

  if (!image) {
    return Promise.reject(new Error('No image provided'));
  }

  const storage = getStorage();
  const storageRef = ref(storage, `images/${image.name}`);
  return uploadBytes(storageRef, image).then(() => {
    return getDownloadURL(storageRef).then((url) => {
      console.log('Image URL:', url);
      return url;
    });
  }).catch((error) => {
    console.error('Error uploading image or getting URL:', error);
    throw error;
  })

};
const modules = {
  toolbar: [
    [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    ['bold', 'italic', 'underline'],
    ['link', 'image'],
    ['clean']
  ],
  imageUploader: {
    upload: async (file) => {
      try {
        const url = await uploadInBodyImage(file);
        console.log("Image URL in Quill:", url); // Ensure this is a string URL
        return { url }; // Return an object with a `url` property
      } catch (error) {
        console.error('Image upload failed:', error);
        throw error;
      }
    },
  },
};
.........
........
.......
          <ReactQuill
  value={body}
  onChange={handleEditorChange}
  modules={modules}
  style={{ height: '400px' }}
/>