Universal Editor Integration in AEM 6.5 LTS

Hi, 

I am trying to Integrate Universal Editor with AEM 6.5 LTS. 

I have created a content fragment, a react app. App is able to connect with AEM and the content fragment values are rendering on App. 

But when i try to add the react app url in the Universal Editor console, i am getting following error :

AEM GraphQL error: Error: AEM CSRF response does not contain a token
    at loadFragment (App.jsx:55:17) and this is my app.jsx file :

import { useEffect, useState } from 'react'
import './App.css'

const AEM_HOST = 'https://localhost:5502'

const GRAPHQL_URL =
  '/aem/content/cq:graphql/b2bcfconfig/endpoint.json'

const CSRF_URL =
  '/aem/libs/granite/csrf/token.json'

const QUERY = `
  query {
    universalEditorByPath(
      _path: "/content/dam/b2b/contentfragments/ue-demo"
    ) {
      item {
        _path
        title
      }
    }
  }
`

function App() {
  const [fragment, setFragment] = useState(null)
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let cancelled = false

    async function loadFragment() {
      try {
        setLoading(true)
        setError('')

        // Step 1: Get the CSRF token from AEM
        const tokenResponse = await fetch(CSRF_URL, {
          method: 'GET',
          credentials: 'include',
        })

        if (!tokenResponse.ok) {
          throw new Error(
            'CSRF token request failed: ' + tokenResponse.status
          )
        }

        // AEM returns { "token": "..." }
        const tokenData = await tokenResponse.json()
        const csrfToken = tokenData && tokenData.token

        if (!csrfToken) {
          throw new Error(
            'AEM CSRF response does not contain a token'
          )
        }

        console.log('AEM CSRF token retrieved successfully')

        // Step 2: Send the GraphQL query
        const response = await fetch(GRAPHQL_URL, {
          method: 'POST',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
            'CSRF-Token': csrfToken,
          },
          body: JSON.stringify({
            query: QUERY,
          }),
        })

        if (!response.ok) {
          const responseText = await response.text()

          throw new Error(
            'GraphQL request failed: ' +
              response.status +
              (responseText ? ' - ' + responseText : '')
          )
        }

        // Step 3: Read the GraphQL response
        const result = await response.json()

        if (result.errors && result.errors.length > 0) {
          throw new Error(result.errors[0].message)
        }

        const item =
          result.data &&
          result.data.universalEditorByPath &&
          result.data.universalEditorByPath.item

        if (!item) {
          throw new Error(
            'No Content Fragment returned. Check the fragment path and GraphQL query.'
          )
        }

        if (!cancelled) {
          setFragment(item)
        }
      } catch (err) {
        console.error('AEM GraphQL error:', err)

        if (!cancelled) {
          setError(
            err instanceof Error
              ? err.message
              : 'An unexpected error occurred while loading AEM content.'
          )
        }
      } finally {
        if (!cancelled) {
          setLoading(false)
        }
      }
    }

    loadFragment()

    return () => {
      cancelled = true
    }
  }, [])

  return (
    <main className="page">
      <p className="eyebrow">AEM Universal Editor Demo</p>

      {error ? (
        <p role="alert">{error}</p>
      ) : loading ? (
        <p>Loading content from AEM…</p>
      ) : fragment ? (
        <article>
          <h1
            data-aue-resource="urn:aemconnection:/content/dam/b2b/contentfragments/ue-demo/jcr:content/data/master"
            data-aue-prop="title"
            data-aue-type="text"
            data-aue-label="Demo Title"
          >
            {fragment.title || 'Untitled demo fragment'}
          </h1>

          <p>
            Content Fragment path: {fragment._path}
          </p>
        </article>
      ) : null}
    </main>
  )
}

export default App