Why does my deployed MERN app return raw data on page refresh?

When a specific get request is called, raw data from mongo displays on the screen like this. I just deployed to Heroku and this issue does not happen on my local server. My thinking is that the issue could be with Editor.js, however, a boolean state change is used to delay render until all data is loaded.

The data returned is correct, so the Axios call is successful. It's just weird that the React component isn't being rendered.

On refresh, this is called:

 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>
    );

Been working on this since the AM and I'm really not sure what's going on. Any idea how to render the React component? Thank you!