Collectors and characteristics do not work as expected when we use ESI markup

Description:
We are trying to show personalized views on our website using collectors and characteristics. We are using the "Has visited a web page" characteristic on a page. Our website is integrated with a CDN. So, we are using ESI markup by setting hst:async as esi on the components. The component does not show variant view when we use ESI. However, this works fine when we are not using ESI and the page is excluded from CDN cache.
Steps to Reproduce:

• Add hst:async = esi to a catalog component to render ESI markup.
• Add the component to the page /esi-test.
• Edit the component to create 2 variants - Default and Variant 1. Each variant shows a different content to uniquely identify them.
• In Variant 1 add a characteristic condition - Has visited a page /products.
• Access the webpage /products.
• Under Audiences->Realtime view the Journey. The Journey contains the page /products as expected.
• Access the webpage /esi-test. The journey contains the page /esi-test but does not show the variant's content.