rendering pixelated texture from image

Question

I'm using three.js to render a cube with image on each side. For some reason the texture is pixelated. I tried fixing this bug by setting minFilter and magFilter but didn't work for me.

The image is simply white text with no background (width: 360px, height: 360px if that matters) Here is my code:

In SceneInit.js ->

  initialize() {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(
      this.fov,
      window.innerWidth / window.innerHeight,
      1,
      1000
    );
    this.camera.position.z = 50;
    this.camera.position.y = 0;

    const canvas = document.getElementById(this.canvasId);
    this.renderer = new THREE.WebGLRenderer({
      canvas,
      antialias: true,
    });

    this.renderer.setSize(window.innerWidth * 0.8, window.innerHeight * 0.8);
    this.renderer.setPixelRatio(window.devicePixelRatio);
    document.body.appendChild(this.renderer.domElement);

    this.clock = new THREE.Clock();
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);

    this.stats = Stats();
    document.body.appendChild(this.stats.dom);

    this.ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    this.ambientLight.castShadow = false;
    this.scene.add(this.ambientLight);
  }

Cube.js ->

function Cube2() {
  useEffect(() => {
    const test = new SceneInit('myThreeJsCanvas');
    test.initialize();

    var loader = new THREE.TextureLoader();
        var jakub = loader.load( './textures/jakub.png' );
        jakub.generateMipmaps = false;
        jakub.minFilter = THREE.LinearMipMapLinearFilter;
        jakub.magFilter = THREE.NearestFilter;
        //tried applying those but didn't work ^
        var jakubL = loader.load( './textures/jakub-left.png' );
        var jakubR = loader.load( './textures/jakub-right.png' );
        var jakubF = loader.load( './textures/jakub-flipped.png' );
        var baginski = loader.load( './textures/baginski.png' );
        var baginskiL = loader.load( './textures/baginski-left.png' );
        var baginskiR = loader.load( './textures/baginski-right.png' );
        var baginskiF = loader.load( './textures/baginski-flipped.png' );

    var cubeMaterials = [
        new THREE.MeshBasicMaterial({map: jakubL}),
        new THREE.MeshBasicMaterial({map: baginski}),
        new THREE.MeshBasicMaterial({map: baginski}),
        new THREE.MeshBasicMaterial({map: jakubR}),
        new THREE.MeshBasicMaterial({map: jakub}),
        new THREE.MeshBasicMaterial({map: baginskiL}),
      ];

    //   cubeMaterials.forEach(material => {
    //     material.map.minFilter = THREE.NearestFilter;
    //     material.magFilter = THREE.NearestFilter;
    //   })
    //   Also doesn't work ^
    
      var cubeGeometry = new THREE.BoxGeometry(20,20,20);
      var cube = new THREE.MeshStandardMaterial(cubeGeometry,cubeMaterials);

    const boxMesh = new THREE.Mesh(cubeGeometry,cubeMaterials);
    test.scene.add(boxMesh);

  return (
    <div>
      <canvas id="myThreeJsCanvas" />
    </div>
  );
}