Remove/hide the long connecting line in plotting GeoJSON linestring using Leaflet [duplicate]

Question

I encounter this long connecting line when plotting a GeoJSON linestring. How do I hide/remove this connecting line?

When I plot it in linestring:

When I plot it manually (slower than using linestring):

<Map
  style={{ height: "400px", width: "100%" }}
  zoom={1.5}
  center={[
    this.state.passes.coordinates[0][1],
    this.state.passes.coordinates[0][0]
  ]}
  scrollWheelZoom={false}
  maxBoundsViscosity={1.0}
  maxBounds={bounds}
>
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
  <GeoJSON
    color="red"
    data={this.state.passes}
    onEachFeature={function(feature, layer) {
      layer.on("click", onLineClick);
      layer.bindPopup(createPopupContent(feature));
    }}
  />
  <Marker position={this.state.marker} icon={iconSatellite} />
</Map>