How to Keep Line Width (strokeWidth) Consistent When Scaling?

[Mirnyjj]

When zooming in, the line also gets thicker. Even when tying its value to the scale, it still breaks and leaves gaps. Any solutions?
// const strokeWidth = useMemo(
() => (zoomLevel < 20 ? 1 / (zoomLevel * 0.25) : undefined),
[zoomLevel],
);

return (

<View
style={{
flex: 1,
height: 400,
width: 1500,
backgroundColor: 'white',
}}>
<CartesianChart
data={fetchDataMap}
padding={{left: 10, right: 10, top: 10, bottom: 50}}
xKey='x'
yKeys={['y1', 'y2', 'y3']}
yAxis={[
{
font: font,
enableRescaling: true,
formatYLabel: formatYLabels,
},
]}
xAxis={{
font: font,
enableRescaling: true,
tickCount: fetchDataMap.length,
tickValues: generateTickValues(),
formatXLabel: formatXLabels,
}}
transformConfig={{
pan: {
enabled: true,
dimensions: 'x',
activateAfterLongPress: 100,
},
pinch: {
enabled: true,
},
}}
transformState={transformState.state}>
{({points, chartBounds}) => {
chartBoundsRef.value = chartBounds;

        return (
          <>
            <Line
              points={points.y1}
              strokeWidth={strokeWidth}
              curveType='linear'
              color={`${fetchData.length === 3 ? '#ffeb3b' : '#2196f3'}`}
              animate={{type: 'timing', duration: 100}}
            />
            <Line
              points={points.y2}
              strokeWidth={strokeWidth}
              curveType='linear'
              color='#64dd17'
              animate={{type: 'timing', duration: 100}}
            />
            <Line
              points={points.y3}
              strokeWidth={strokeWidth}
              animate={{type: 'timing', duration: 100}}
              curveType='linear'
              color='#f44336'
            />
          </>
        );
      }}
    </CartesianChart>
  </View>
</SafeAreaView>

);
//