CSS styles are not working on dynamic classes with amp-bind in NEXT.js

Question

amp-bind-class to add 'active' class to buttons that are active. And it's working perfectly when I see it through chrome developer tools but the only problem is that the CSS is not working on them. I am using AMP in Next.js

{foo.map((item, i) => (
    <button
        className="pagination-buttons"
        data-amp-bind-class={
            "data.currentPage==" +
            i +
            "?'pagination-buttons active':'pagination-buttons'"
        }
    >
        {i + 1}
    </button>
))}

Before clicking on any button it looks like this:

After Clicking on any button it looks like this:

And this is DOM after I click

Expected: