Needle with image

[opmat]

Thanks for the good work.

I have a few questions on the Needle

1. I tried using a custom needle but did not get how to align it, the needle keeps jumping around. My code for the needle is below

<Needle circleRadius={30} circleColor="white" baseWidth={25}>
            {() => {
              // you might need the center of the circle
              // to place the needle correctly
              const center = width / 2;

              return (
                // some magic SVG here
                <Svg 
    width={144}
    height={137}
    fill="none"
  >
    <Path
      fill="#fff"
      d="M81.766 59.451c-4.94-5.285-13.226-5.57-18.507-.633-5.282 4.935-5.559 13.222-.619 18.507 4.94 5.286 13.226 5.57 18.507.634 5.282-4.936 5.559-13.222.619-18.508Z"
    />
    <Path fill="#fff" d="M71.517 78.891 3.613 114.447l59.821-49.95" />
    <Path
      fill="#fff"
      d="m55.195 68.65 2.218-.444c.06-4.603 2.254-9.114 6.305-11.947 6.684-4.673 15.927-3.033 20.606 3.654 4.677 6.689 3.046 15.93-3.638 20.604-4.034 2.82-9.001 3.34-13.332 1.84l-1.97 1.61c5.255 2.295 11.546 1.887 16.575-1.63 7.687-5.374 9.562-16.004 4.182-23.695-5.38-7.692-16.01-9.576-23.696-4.202-4.797 3.354-7.332 8.754-7.25 14.211v-.001Z"
    />
    <Path
      fill="#0D3E9B"
      d="M76.868 64.646c-.148-.716-.389-1.345-.724-1.889a3.887 3.887 0 0 0-1.256-1.285 3.088 3.088 0 0 0-1.67-.472c-.609 0-1.204.157-1.784.472a5.553 5.553 0 0 0-1.567 1.285 7.638 7.638 0 0 0-1.175 1.89 8.1 8.1 0 0 0-.628 2.294 7.26 7.26 0 0 0 .057 2.296c.14.727.376 1.362.71 1.905.064.102.133.196.202.29a15.507 15.507 0 0 1 2.132-1.043c.07-.028.134-.047.202-.071a1.693 1.693 0 0 1-.256-.137 2.276 2.276 0 0 1-.705-.757 3.302 3.302 0 0 1-.4-1.115 4.572 4.572 0 0 1-.025-1.368c.06-.489.182-.946.368-1.375.186-.428.413-.803.68-1.124.266-.32.562-.571.888-.756a2.023 2.023 0 0 1 1.01-.277 1.7 1.7 0 0 1 .945.277c.284.184.52.437.711.756.19.321.324.696.4 1.124.076.429.084.886.025 1.375a4.817 4.817 0 0 1-1.047 2.483 3.426 3.426 0 0 1-.457.455c.642.006 1.114.175 1.41.51.148.168.254.366.317.593a8.057 8.057 0 0 0 1.707-4.04 7.005 7.005 0 0 0-.07-2.296Z"
    />
    <Path
      fill="#E10000"
      fillRule="evenodd"
      d="M72.423 70.881c-.876.188-1.853.615-2.932 1.283-.328.204-.66.428-.991.662.183.086.367.17.56.24 1.014.36 2.09.42 3.227.176.954-.205 1.856-.615 2.713-1.206-.11-.393-.299-.708-.588-.927-.45-.34-1.113-.416-1.99-.228Z"
      clipRule="evenodd"
    />
  </Svg>
              );
            }}
          </Needle>

It gave me this

2. After trying the above, I could not get it to work so I used the normal Needle and got this

But I would like to add an image to the center of the needle to look like below. How can I get it done?

Any assistance in pointing me in the right direction for any of the two points will be appreciated