Nested Child Fragment Disappear after Configuration change (Screen Rotation, Device theme change)

Question

In the MainActivity of my android application I have added a default fragment (HomeFragment) to show when the activity is launched. Inside the HomeFragment, I have added another fragment (ResourceCountFragment) to create different components in the HomeFragment. I tried to implement this so that I can reuse the views in ResourceCountFragment in other Activities or Fragments. The ResourceCountFragment is loaded and displayed on screen when the app is launched, but it disappear as soon as the app configuration changes (Such as android dark/light theme is changed, the device is rotated). It does not load back until the app is completely closed and restarted. I can't seem to find the solution anywhere. And since I am just starting to learn Android Development, I would also like to know if this approach to create nested fragment in another is the right one to compartmentalize the app for better efficiency and stuff.

Here are the codes for MainActivity kotlin class:

class MainActivity : AppCompatActivity() {
    private lateinit var drawerLayout: DrawerLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        // Navigation Drawer Opener
        val imageMenu: ImageView = findViewById(R.id.imageMenu)
        drawerLayout = findViewById(R.id.drawerLayout)
        imageMenu.setOnClickListener {
            drawerLayout.openDrawer(GravityCompat.START)
        }


        // Setting the default activity
        supportFragmentManager.beginTransaction().add(R.id.frameLayout, HomeFragment()).commit()


        // Navigation Menu Functionality
        val navigationView: NavigationView = findViewById(R.id.navigationView)
        navigationView.setNavigationItemSelectedListener {
            it.isChecked = true
            drawerLayout.closeDrawers()
            when (it.itemId) {
                R.id.menuProfile -> changeFragment(ProfileFragment())
                R.id.menuContribute -> changeFragment(ContributeFragment())
                R.id.menuNotification -> Toast.makeText(applicationContext, "Notification Clicked, Not yet Implemented", Toast.LENGTH_SHORT).show()
                R.id.menuInbox -> Toast.makeText(applicationContext, "Inbox Clicked, Not yet Implemented", Toast.LENGTH_SHORT).show()
                R.id.menuSettings -> Toast.makeText(applicationContext, "Settings Clicked, Not yet Implemented", Toast.LENGTH_SHORT).show()
                R.id.menuSupport -> Toast.makeText(applicationContext, "Support Clicked, Not yet Implemented", Toast.LENGTH_SHORT).show()
                R.id.menuAbout -> Toast.makeText(applicationContext, "About Clicked, Not yet Implemented", Toast.LENGTH_SHORT).show()
                R.id.menuLogout -> {
                    FirebaseAuth.getInstance().signOut()
                    startActivity(Intent(this, IntroActivity::class.java))
                    finish()
                }
            }
            true

        }

    }


    private fun changeFragment(fragment: Fragment) {

        val fragmentManager = supportFragmentManager
        val fragmentTransaction = fragmentManager.beginTransaction()
        fragmentTransaction.replace(R.id.frameLayout, fragment)
        fragmentTransaction.commit()
    }
}

Here are the codes for HomeFragment kotlin class:

class HomeFragment: Fragment(R.layout.fragment_home) {
    private var _binding: FragmentHomeBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentHomeBinding.inflate(inflater, container, false)

        // Adding the ResourceCountFragment
        parentFragmentManager.beginTransaction().add(R.id.resourceCountFrame, ResourceCountFragment()).commit()
        
        return binding.root
    }


    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

Here are the codes for ResouceCountFragment kotlin class:

class ResourceCountFragment : Fragment() {

    private var _binding: FragmentResourceCountBinding? = null
    private val binding get() = _binding!!

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Count Views API Call
        val countData = RetrofitInterface.retrofit.getCountList()
        countData.enqueue(object: Callback<List<CountModel>> {
            override fun onResponse(
                call: Call<List<CountModel>>,
                response: Response<List<CountModel>>
            ) {
                val countList: List<CountModel> = response.body() as List<CountModel>

                var questionCount = 0
                var bookCount = 0
                var notesCount = 0
                var slidesCount = 0

                for (i in countList.indices) {
                    bookCount += countList[i].books
                    questionCount += countList[i].questions
                    notesCount += countList[i].handNotes
                    slidesCount += countList[i].slides
                }

                binding.questionsCount.text = questionCount.toString()
                binding.booksCount.text = bookCount.toString()
                binding.notesCount.text = notesCount.toString()
                binding.slidesCount.text = slidesCount.toString()
            }

            override fun onFailure(call: Call<List<CountModel>>, t: Throwable) {
                Log.d("HomeFragment","Failed to load Resource Count: "+t.message)
            }
        })
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentResourceCountBinding.inflate(inflater, container, false)


        return binding.root
    }
}