¿Por qué mi aplicación MERN implementada devuelve datos sin procesar al actualizar la página?

Cuando se llama a una solicitud de get específica, los datos sin procesar de mongo se muestran en la pantalla de esta manera. Acabo de implementar en Heroku y este problema no ocurre en mi servidor local. Mi opinión es que el problema podría ser con Editor.js , sin embargo, se usa un cambio de estado booleano para retrasar el procesamiento hasta que se carguen todos los datos.

Los datos devueltos son correctos, por lo que la llamada de Axios es exitosa. Es extraño que el componente React no se esté renderizando.

Al actualizar, esto se llama:

 useEffect(() => { initialDataLoadEditor(); }, []); async function initialDataLoadEditor() { try { const response = await axios.get(`/document/${id}`); setData(response.data); setIsLoaded(true); } catch (error) { console.error(error); } } if (isLoaded === false) { return <div>LOADING...</div>; } return ( <div> <div className='flex justify-center'> <label > <TextareaAutosize className={` mt-2 mb-2 flex-child outline-none resize-none text-2xl font-bold`} type="text" ref={nameRef} defaultValue={data.name} onChange={(e) => handleSave(e)} /> </label> </div> <EditorJs instanceRef={(instance) => (instanceRef.current = instance)} placeholder="Start typing what's in your head..." tools={EDITOR_JS_TOOLS} enableReInitialize={true} data={data.components[0]} onChange={(e) => handleSave(e)} /> </div> );

He estado trabajando en esto desde la mañana y realmente no estoy seguro de lo que está pasando. ¿Alguna idea de cómo renderizar el componente React? ¡Gracias!