Adobe Target Web SDK implementation for SPA

I have a specific query on Adobe target implementation through Web SDK for React Single Page Application.

I am using Adobe Client Data Layer to send data to AEP, AA and AT. ACDL DataElement change event "pageName" triggers on every SPA page of my react application.

On "page view" xdm, I am setting the viewName parameter as shown in below screenshot.

On page view send event action, I am using both the checkboxes related to AT (Render visual personalization decisions and automatically send a display event)

Screenshots of the rule and action configs are below.

I have flight-search page and flights page. Users will land on home page and can navigate to flight search page to search the flight once search completed user will land flights page where it listing available flight option. I have created the recommendation activity to show some recommendation in flights page. I can see the viewName being set properly. However, when the recommendation is not visible when navigate from flight-search page to flights page.  If I manually reload the page I can see the recommendation and this issue is for other activities too..