Aui-prototying js not working in confluence dynamic macro

Hi

We are trying to upgrade the aui version of one of our existing confluence macro. The version we are using is aui 8.3.2 available from the flat packs. Below is the javascript import code in our base header file.

<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”/>
<meta name=“atlassian-token” th:content=“${atlassianConnectToken}”/>
<script type=“text/javascript” th:src=“@{/js/jquery/jquery-3.3.1.min.js}” ></script>
<script type=“text/javascript” th:src=“@{/js/resources/require.js}” ></script>
<link rel=“stylesheet” th:href=“@{/css/aui/aui-prototyping.css}”/>
<script type=“text/javascript” th:src=“@{/js/resources/aui-prototyping.js}” ></script>
<script th:src=“@{${atlassianConnectAllJsUrl}}” type=“text/javascript” ></script>

We are using thymeleaf template.

aui dropdown is not working in our templates . We have tried the same script in standalone file and the behavior is expected (working dropdown) there.

<div class=“container”></div>

<div id=“alignment-container”>
<button class=“aui-button aui-dropdown2-trigger” aria-controls=“left-aligned”>
Left-aligned dropdown
</button>
<button class=“aui-button aui-dropdown2-trigger” aria-controls=“right-aligned”>
Right-aligned dropdown
</button>
</div>

<aui-dropdown-menu id=“left-aligned” data-aui-alignment-container=“#alignment-container”>
<aui-section>
<aui-item-link href="http://amazon.com">Amazon</aui-item-link>
<aui-item-link href="http://apple.com">Apple</aui-item-link>
</aui-section>
</aui-dropdown-menu>

<aui-dropdown-menu id=“right-aligned” data-aui-alignment-container=“#alignment-container”>
<aui-section>
<aui-item-link href="https://facebook.com">Facebook</aui-item-link>
<aui-item-link href="https://google.com">Google</aui-item-link>
</aui-section>
</aui-dropdown-menu>