Android - How To Implement Multiple ViewHolder One For Header Layout Another For Model Layout In Firestore RecyclerView Adapter

I'm trying to make 2 view holder one will be at position 0 always which will be a header view for selecting image, another for displaying the model, I can do it for normal recyclerview adapter but in firestore recycler adapter i can't do it, what I try it increase the item count by 1 but I got

java.lang.IndexOutOfBoundsException: Index: 0, Size: 0

This is my adapter class code:

val TYPE_SELECT_IMAGE = 0
val TYPE_ITEMS = 1

class UsersImageAdapter(options: FirestoreRecyclerOptions<UserImage>)
    : FirestoreRecyclerAdapter<UserImage, RecyclerView.ViewHolder>(options) , AnkoLogger{
    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int, model: UserImage) {

        when(holder){
            is SelectImageViewHolder -> {
            holder.bindModel()
        }
            is UserImageViewHolder -> {
                holder.bindImages(model)
            }
        }

    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when (viewType) {
            TYPE_SELECT_IMAGE -> {

                val view = LayoutInflater.from(parent.context).inflate(R.layout.item_add_image, parent, false)
                SelectImageViewHolder(view)


            }
            TYPE_ITEMS -> {
                val view = LayoutInflater.from(parent.context).inflate(R.layout.item_image,parent,false)
                UserImageViewHolder(view)

            }
            else -> throw RuntimeException()
        }
    }

    override fun getItemViewType(position: Int): Int {
        return if (isPositionHeader(position)) {
            TYPE_SELECT_IMAGE
        } else {
            TYPE_ITEMS
        }

    }

    fun isPositionHeader(position: Int): Boolean {
        return position == 0
    }

    override fun getItemCount(): Int {
        return super.getItemCount() + 1 
    }
}

and this is two view holder one for header view another for displaying model

class SelectImageViewHolder(val view: View) : RecyclerView.ViewHolder(view) , AnkoLogger{
        fun bindModel() { 
            view.setOnClickListener {
                info {
                    "clicked !"
                }
            }
        }
    }
class UserImageViewHolder(val view: View) : RecyclerView.ViewHolder(view) {
    fun bindImages(userImage: UserImage) {
        val imageView = view.findViewById<ImageView>(R.id.image_user_post)
        Glide.with(view.context).load(userImage.imageUrl).into(imageView)
    }
}

my goal is to keep the SelectImageViewHolder in position 0 always

FirebaseUI maintainer here.onBindViewHolder(RecyclerView.ViewHolder, Int, Model) makes a getItem(position) call internally to seamlessly populate your model. Since you're manually injecting an item, the RecyclerView is going to think there are items in the database and will blow up as you saw. To fix that, you'll want to override the native onBindViewHolder(RecyclerView.ViewHolder, Int) method without calling super:

override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
    when(holder) {
        is SelectImageViewHolder -> holder.bindModel()
        is UserImageViewHolder -> {
            // Manually get the model item
            holder.bindImages(getItem(position - 1))
        }
    }
}