Line layer line-gap-width paint property got overlap when increase its sizes

[lduchuy2002]

When I drawed line layer and set the line-gap-width and increase its sizes. There will be line overlapped

mapbox-gl version 2.10.0

Here is when I set line layer gap width to small number and it worked fine

But when I increased it, it being overlapped by each others

are there any ways to remove black overlapped line parts? Please help me

Below is my line layer code:

        layout: {
          'line-cap': ['get', 'lineCap'],
          'line-join': ['get', 'lineJoin']
        },
        paint: {
          'line-color': 'black',
          'line-gap-width': getLineLayerInterpolation(circleRadius ?? 0),
          'line-width': 1
        },
        type: 'line'
      } 

const baseRate = 10000

const level = 'level'

const maxZoomLevel = 22

const zoomLevelRate = {
  [`${level}-0`]: 1,
  [`${level}-1`]: 1,
  [`${level}-2`]: 1,
  [`${level}-3`]: 1,
  [`${level}-4`]: 1,
  [`${level}-5`]: 2,
  [`${level}-6`]: 4,
  [`${level}-7`]: 8.1,
  [`${level}-8`]: 16.3,
  [`${level}-9`]: 32.7,
  // eslint-disable-next-line sort-keys-fix/sort-keys-fix, sort-keys
  [`${level}-10`]: 65.4,
  [`${level}-11`]: 130.8,
  [`${level}-12`]: 261.6,
  [`${level}-13`]: 523.3,
  [`${level}-14`]: 1046.6,
  [`${level}-15`]: 2093.2,
  [`${level}-16`]: 4186.4,
  [`${level}-17`]: 8372.9,
  [`${level}-18`]: 16745.8,
  [`${level}-19`]: 33491.6,
  [`${level}-20`]: 66983.2,
  [`${level}-21`]: 133966.4,
  [`${level}-22`]: 267932.9
}

export const getLineLayerInterpolation = (radius: number) => {
  const interpolates: Expression = ['interpolate', ['linear'], ['zoom']]
  for (let i = 0; i <= maxZoomLevel; i++) {
    interpolates.push(
      ...[
        i,
        ['/', ['*', zoomLevelRate[`${level}-${i}`], ['*', radius, 2]], i === maxZoomLevel ? baseRate / 2 : baseRate]
      ]
    )
  }
  return interpolates
}