Mesh becomes white on applying texture

I am working on 3D configurator that allows user to change color, add texture(country flags in our case) to meshes and apply text on the 3D model. However, I have encountered a problem that is hindering the process. When I apply color to a mesh and then add a texture to it, the texture gets loaded but the mesh color changes to white. I have set the materials transparency to true but its not working.

The red color here was applied to the whole mesh but after loading the flag, the mesh becomes white. Help me fix this bug please.

Curious about this part - why would you need transparency?

It’s a bit hard to help without seeing the code, I’d assume you’re overriding the color material accidentally.

const loadFlag = async (src) => {

var obj = glove.getObjectByName(selectedPart);
loadedTexture = await createTextureFromImage(src);
obj.material = new THREE.MeshBasicMaterial({ map: loadedTexture, transparent: true, roughness: 2, side: THREE.DoubleSide});


//var rotFactor=0;
const createTextureFromImage = async (imageUrl) => {
return new Promise((resolve, reject) => {
const canvas = document.createElement(‘canvas’);
const texture = new THREE.CanvasTexture(canvas);

    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.NearestMipMapNearestFilter;
    texture.mapping = THREE.EquirectangularReflectionMapping;
    texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
    texture.flipY = false;
    texture.colorSpace = THREE.SRGBColorSpace;

    new THREE.ImageLoader().load(imageUrl, image => {
        const ctx = canvas.getContext('2d');
        //console.log(canvas.width, canvas.height)
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        var ratio = 1;
        if(image.height < image.width){
            ratio = 4;
        if(selectedPart === 'p5'){
                image.width/8 + moveHorizontalFactor,
                image.height/2 + moveVerticalFactor,
                image.width * scaleFactor,
                image.height * scaleFactor / ratio
                // scale factor = 0 to 1
            //texture.rotation = 1.571;
                canvas.width * scaleFactor,
                canvas.height * scaleFactor 
                // scale factor = 0 to 1

     texture.needsUpdate = true;
    }, undefined, reject);


Here is the code, if i don’t set the transparency to true, the mesh becomes black maybe because im using canvas texture to map the flag