How to add custom marker in ar.js?

Question

I am trying to change default hiro marker with my own marker. its black and white image in jpg format. i generated pattern file using https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

this is code for marker

 <a-marker
      preset="pattern"
      type="pattern"
      url="https://cdn.glitch.global/8e98caee-09a2-4050-aa4b-53ddcebc0457/pattern-marker_uni.patt?v=1651161066156"
    ></a-marker>

you can check my code here https://glitch.com/edit/#!/oceanic-confirmed-allspice

What ever I tried , it is not triggering on this pattern. should I use nft image tracking vs marker tracking.