Google Overlay - Maptiles are showing in wrong place

Question

I have stored Google Map tiles in local storage and displaying them on google map as Map overlay using this code:

  TileOverlayOptions().tileProvider(
            CustomMapTileProvider(
                requireContext(), folderName
            )
        )

I am using custom map tile provider as below to get map tiles from storage:

private fun readTileImage(x: Int, y: Int, zoom: Int): ByteArray? {
    var `in`: FileInputStream? = null
    var buffer: ByteArrayOutputStream? = null
    return try {
        reversedY = (1 shl zoom) - y - 1
        `in` = FileInputStream(getTileFile(x, reversedY, zoom))
        buffer = ByteArrayOutputStream()
        var nRead: Int
        val data = ByteArray(BUFFER_SIZE)
        while (`in`.read(data, 0, BUFFER_SIZE).also { nRead = it } != -1) {
            buffer.write(data, 0, nRead)
        }
        buffer.flush()
        buffer.toByteArray()
    } catch (e: IOException) {
        e.printStackTrace()
        null
    } catch (e: OutOfMemoryError) {
        e.printStackTrace()
        Log.v(TAG, "OUM: " + e.message)
        null
    } finally {
        if (`in` != null) try {
            `in`.close()
        } catch (ignored: Exception) {
        }
        if (buffer != null) try {
            buffer.close()
        } catch (ignored: Exception) {
        }
    }
}

private fun getTileFile(x: Int, y: Int, zoom: Int): File? {
    var file: File? = null
    try {
        val sdcard = File(
            Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES)
                .toString() + "/.NodesMobile/" + mapTileFolder
        )
        val tileFile = "/$zoom/$x/$y.png"
        file = File(sdcard, tileFile)
    } catch (e: Exception) {
        e.printStackTrace()
        Log.v(TAG, "Tile not found: " + e.message)
    }
    return file
}

override fun getTile(x: Int, y: Int, zoom: Int): Tile? {
    val image = readTileImage(x, y, zoom)
    return if (image == null) TileProvider.NO_TILE else Tile(TILE_WIDTH, TILE_HEIGHT, image)
}

companion object {
    private const val TILE_WIDTH = 256
    private const val TILE_HEIGHT = 256
    private const val BUFFER_SIZE = 16 * 1024
}

The overlay map becomes distorted when zooming in and out the map. Some map tiles are placed at wrong place sometimes as shown in below screenshot:

Can anyone help with this?