Make the SpriteMaterial 'particles' rounded, or circular in Three.js with React

This was the code initially (which works fine in most environments):

var PI2 = Math.PI * 2;
var material = new THREE.SpriteCanvasMaterial( {

    color: 0x939393, //changes color of particles
    program: function ( context ) {

        context.beginPath();
        context.arc( 0, 0, 0.1, 0, PI2, true );
        context.fill();

    }

} );

However when I attempt to run that (rendering via THREE.CanvasRendered) I get an error saying that SpriteCanvasMaterial is not a valid constructor. I did some research and apparently within my react environment (Gatsby), I should use SpriteMaterial instead.

Making that change (as well as changing the rendering to WebGLRenderer) worked, however the material is square shaped instead of round. The "program function" no longer seems to work.

I tried doing texture mapping as such:

var spriteMap = new THREE.TextureLoader().load('mycircle.png');


        var material = new THREE.SpriteMaterial({
            map: spriteMap,
            color: 0xFAFAFA, //changes color of particles
        });

And that changes the shape to a circle as I wanted, however it hits the quality really badly and the circles are blurry (despite excellent quality of the png).

Been researching this for hours and can't seem to find a solution to just render good quality circles instead of the squares I have.

Thanks.