How to navigate to seperate Fragments when clicked on different Tabs in TabLayout in android?

Question

I have three Tabs [Easy,Medium and Hard] and I want to open three different Fragments for each Tab or the default Tab for Easy Fragment data and two more Fragments for for Medium and Hard. So, I have finished intergating the Tabs using ViewPager 2 and TabLayout but I am not able to understand how to can I navigate to diffrent fragments here. Note, I know how to create a Navigation on Nav Graph, I am just not sure how to navigate to various Fragments on Tab clicks. Following is my Fragment code.

Flashcards.kt

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.cardview.widget.CardView
import androidx.navigation.Navigation
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.example.visuallithuanian.R
import com.example.visuallithuanian.adapter.FlashcardsAdapter
import com.example.visuallithuanian.data.FlashCardInfo
import com.example.visuallithuanian.ui.activities.FirstScreen
import com.google.android.material.bottomnavigation.BottomNavigationView
import dagger.hilt.android.AndroidEntryPoint


@AndroidEntryPoint
class FlashCards : Fragment() {

    lateinit var bottomNav:BottomNavigationView

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {

        // Inflate the layout for this fragment
        val view=inflater.inflate(R.layout.fragment_flash_cards,
container, false)

        //Taking the bOTTOMNavigation view instance from Activity into Fragment
        bottomNav = (activity as?
FirstScreen)?.findViewById(R.id.bottomNavigationView)!!
        bottomNav.visibility = View.VISIBLE

        val back_icon = view.findViewById<ImageView>(R.id.back_icon)
        val recyclerViewCards1 =
view.findViewById<RecyclerView>(R.id.recyclerViewFlashcards)

        recyclerViewCards1.layoutManager = LinearLayoutManager(context)

        val navController = Navigation.findNavController(requireActivity(),
            R.id.nav_host_fragment
        )

        val flashCardList = generateFlashCards()
        val adapter = FlashcardsAdapter(flashCardList,navController)
        recyclerViewCards1.adapter = adapter


        // setting up listener
        back_icon.setOnClickListener {
            activity?.onBackPressed()
        }

        return view
    }

    private fun generateFlashCards():List<FlashCardInfo> {
        return listOf(
            FlashCardInfo(R.drawable.talking,"Daily Conversation",""),
            FlashCardInfo(R.drawable.doctorvisit,"Questions and Pronouns",""),
            FlashCardInfo(R.drawable.food,"Food",""),
            FlashCardInfo(R.drawable.relatives,"Relatives",""),
            FlashCardInfo(R.drawable.clothing,"Clothing",""),
            FlashCardInfo(R.drawable.village,"Towns and Villages",""),
            FlashCardInfo(R.drawable.nature,"Nature",""),
            FlashCardInfo(R.drawable.verbs,"Popular Verbs",""),
        )

    }


}

This is my Adapter class FlashcardsAdapter.kt

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.cardview.widget.CardView
import androidx.navigation.NavController
import androidx.navigation.findNavController
import androidx.recyclerview.widget.RecyclerView
import com.example.visuallithuanian.data.FlashCardInfo
import com.example.visuallithuanian.ui.activities.fragments.FlashCardsDirections


class FlashcardsAdapter(private val imageList: List<FlashCardInfo>
,  private val navController: NavController
) :RecyclerView.Adapter<FlashcardsAdapter.ViewHolder>(){

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageViewFlashcards =
itemView.findViewById<ImageView>(com.example.visuallithuanian.R.id.imageViewFlashcards)
        val textViewFlashcards =
itemView.findViewById<TextView>(com.example.visuallithuanian.R.id.textflashCardName)
       // val textViewFlashcardsLithuanian =
itemView.findViewById<TextView>(com.example.visuallithuanian.R.id.textflashCardLithuanian)

        val cardviewFlashcard =
itemView.findViewById<CardView>(com.example.visuallithuanian.R.id.cardFlashCards)

    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):
ViewHolder {
        val view =
LayoutInflater.from(parent.context).inflate(com.example.visuallithuanian.R.layout.item_flashcards,
parent, false)
        return ViewHolder(view)

    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val current_item = imageList[position]

        holder.imageViewFlashcards.setImageResource(current_item.imageId)
        holder.textViewFlashcards.text = current_item.name
    //    holder.textViewFlashcardsLithuanian.text = current_item.translation

        holder.cardviewFlashcard.setOnClickListener {
            val action = when(position){
                    1
->FlashCardsDirections.actionFlashCardsToQuestionsFragment()

                else -> return@setOnClickListener
            }
            action.let {
                navController.navigate(it)
            }

        }


    }


    override fun getItemCount(): Int {
        return imageList.size
    }
}

So, How can I add functionality to navigate to various Fragments on Tab clicks?