White Outline visible on rendered mesh

Hi,

I am currently facing an issue where the content loaded using three.js has a white outline around the mesh as shown below.

image

Other meshes that were loaded are working fine. Just the grass mesh is facing this issue. May I check what could be causing this issue?

I am loading the content from a GLTF file as a scene through @react-three/fiber. The codes are as follows:

export default function Map1(props) {
  const group = useRef();
  const model = useLoader(GLTFLoader, "/models/new_map1.gltf");
  /* if (props.mipMapper) { */
  model.scene.traverse((child) => {
    if (child.isMesh) {
      child.material.map.generateMipmaps = false;
      child.material.map.magFilter = THREE.LinearFilter;
      child.material.map.minFilter = THREE.LinearFilter;
      child.material.map.encoding = THREE.sRGBEncoding;
      child.material.map.anisotropy = 0;
    }
  });

  return (
    <Suspense fallback={null}>
      <primitive ref={group} {...props} object={model.scene} />
    </Suspense>
  );
<Canvas
        onCreated={({ gl }) => {
          /* setMipMapper(new RoughnessMipmapper(gl)); */
          gl.outputEncoding = THREE.sRGBEncoding;
        }}
        gl={{
          antialias: true,
          toneMapping: THREE.ACESFilmicToneMapping,
          toneMappingExposure: 1,
          outputEncoding: THREE.sRGBEncoding,
        }}
        dpr={window.devicePixelRatio}
        shadows
        camera={{
          position: [0, 12, 12],
          rotation: [-Math.PI / 4, 0, 0],
          fov: 50,
          near: 1,
          far: 100,
        }}
>
  <Map1 />
</Canvas>

Thank You