Geojson line disappears when zoomed out

[Feridun12]

Hey guys so I am trying to display some line strings on the map but when I zoomed out the line just disappear. When I make the lines really big they do not disappear but when they are small they just disappear.

My code is like this:

const geojson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[4.76389, 52.308601],
[4.964, 52.31801],
],
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[3.3135576329102174, 47.974765884661466],
[3.326558839963332, 47.983992342939445],
],
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[3.3135576329102174, 47.974765884661466],
[3.326558839963332, 47.983992342939445],
],
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[24.72135, -123.37929],
[24.82135, -123.47929],
],
},
},
],
tolerance: 2e-200
};

const layerStyle = {
id: "runway",
type: "line",
paint: {
"line-color": "#fc0303",
"line-width": 30
},
layout: {
"visibility": "visible",
"line-cap": "round",
"line-join": "round",
},
};

and this is how I implement it to the map component:

    <Source id="my-data" type="geojson" data={geojson}>
      <Layer {...layerStyle} />
    </Source>

What should I also include to make the line visible when zoomed out. I tried researching about it there was not much resource on this topic.

Thank you in advance!