Vector Tile Layer Interactivity lost after adding a Geojson Layer into leaflet map in react

Question

Leaflet.VectorTileLayer wrapped for to use in react-leaflet. There are bunch of these tile layers in the overlays and also some other layers imports direct json data with GeoJSON component of react-leaflet. Everthing works fine but, if I load the geojson layers first, i lost the interactivity of the vector tile layer. Layers loading fine but not clickable or others style options are not rendering in the map. Without loading geojson layer, they are working.

Simple usage in the code:

        <Overlay name="Turkey Counties">
          <TRCountiesGeoJSON ref="TRCountiesGeoJSON" />
        </Overlay>

        <Overlay  name="Sentinel-2 Grid">
          <WrappedVectorTileLayer {...sentineloptions}
            // onClick={function (layer) {
            //   console.log("layer: ", layer);
            // }}
            onClick={(e) => this.handleSentinelGridClick(e)}
            url={this.state.geojsonUrl + "/sentinel2grid/{z}/{x}/{y}.pbf"}
          />
        </Overlay>

Vector tile implementation came from @willfalconer's repository