Fragment inside a fragment not persisted when using multiple back stack

Question

So, I use this approach to support multiple back stack for my app, google sample code. This code should make bottom navigation component persist the fragment and all of the content(scroll state, etc) inside it. So the problem is when I have fragment that I create it programatically inside fragment, let me use the google sample code to create an example. I change the Leaderboard tab destination to my custom Board fragment.

class BoardFragment : Fragment() {

    private lateinit var leaderboardFragment: Leaderboard

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_board, container, false)

    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        leaderboardFragment = Leaderboard.newInstance()
        activity?.supportFragmentManager?.beginTransaction()
                ?.replace(R.id.frag_container, leaderboardFragment)
                ?.commit()
    }
}

In onViewCreated method, I create Leaderboard fragment and replace my fragment container that I create in Board fragment layout to this newly created Leaderboard fragment. The result is identical with the original code, but the problem is that Leaderboard fragment obviously not persisted when we go to other menu and come back to it because the fragment created again in onViewCreated. So, how to persist the fragment?