React Quill is not rendering

Question

React Quill not Working . I am using localstorage as a draft for react quill.

At intial it was working by accessing through home page http://localhost:5874/ to editor page http://localhost:5874/editor

but it was not rendering directly through http://localhost:5874/editor

then i have use local storage now its not working anymore in any way ?

QuillEditor.jsx

import React, { useEffect, useRef, useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import axios from "axios"


function QuillEditor() {
  const reactQuillRef = useRef(null);
  const [quillText, setQuillText] = useState('');

  useEffect(() => {
    const storedQuillText = localStorage.getItem('reactQuillText');
    if (storedQuillText) {
      setQuillText(storedQuillText);
    }
  }, []);


  useEffect(() => {
    localStorage.setItem('reactQuillText', quillText);
  }, [quillText]);

 
  const handleQuillChange = (content) => {
    setQuillText(content);
  };


  const mediaUpload = async ({ file, type }) => {
    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await axios.post('/upload-media', formData);

      if (response.status === 200) {
        const { mediaUrl, mediaType } = response.data;
        const quill = reactQuillRef.current.getEditor();
        const range = quill.getSelection(true);

        if (mediaType.startsWith('image/') && type === 'image') {
          quill.insertEmbed(range.index, 'image', mediaUrl);
        } else if (mediaType.startsWith('video/') && type === 'video') {
          quill.insertEmbed(range.index, 'video', mediaUrl);
        }
      } else {
        console.error('Media upload failed');
      }
    } catch (error) {
      console.error('Media upload failed', error);
    }
  };

  const handleImageUpload = () => {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'image/*';
    fileInput.click();

    fileInput.addEventListener('change', () => {
      const file = fileInput.files[0];
      mediaUpload({ file, type: 'image' }); 
    });
  };

  const handleVideoUpload = () => {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'video/*';
    fileInput.click();

    fileInput.addEventListener('change', () => {
      const file = fileInput.files[0];
      mediaUpload({ file, type: 'video' }); // Pass an object with file and type properties
    });
  };

  const modules = {
    toolbar: {
      container: [
        [{ header: [1, 2, false] }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [{ 'list': 'ordered' }, { 'indent': '-1' }, { 'indent': '+1' }]
        ['link', 'image', 'video'],
      ],
      handlers: {
        image: handleImageUpload,
        video: handleVideoUpload,
      },
    },
  };

  return (
    <>
      <ReactQuill value={quillText}
        onChange={handleQuillChange}
        placeholder="Enter text here..."
         theme="snow" modules={modules}
         ref={reactQuillRef} />
    </>
  );
}

export default QuillEditor;