Parsys is not appearing in experience fragment in SPA Editor React project
I am trying to create an experience fragment for SPA by extending "cq/experience-fragments/components/xfpage". I just followed the instructions on the WKND site. I could see XF related features on the left side but I don't see any placeholder (parsys) to add a component. I double checked the index.js and entrypoint of the SPA which is provided by the AEM SPA Editor JS SD and. Both Sightely and SPA entry has the root element "spa-root". But still the responsive grid is not appearing on the XF page. Note I have the same setup for a regular page where I could see the parsys. I have a problem only in XF pages.
Is there any additional config I should make?
Body.html
<div id="spa-root" data-sly-resource="${resource @ resourceType='cq/remote/content/renderer/request/handler'}"></div>
<sly data-sly-include="footerlibs.html"/>
ui.frontend/src/index.js
document.addEventListener('DOMContentLoaded', () => {
ModelManager.initialize().then((pageModel) => {
const history = createBrowserHistory()
render(
<Router history={history}>
<App
history={history}
cqChildren={pageModel[Constants.CHILDREN_PROP]}
cqItems={pageModel[Constants.ITEMS_PROP]}
cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
cqPath={pageModel[Constants.PATH_PROP]}
locationPathname={window.location.pathname}
/>
</Router>,
document.getElementById('spa-root')
)
})
})
