Why is a fragment overlaid on another fragment when replace?

Question

Kotlin

Friends, hello everyone!
Help to understand the following situation please!
I am in homeFragment, from it I want to launch contentFragment. Everything starts, but the fragments overlap each other! As you can see in the screenshot, layering is in progress. On one fragment, the TextView shows the Home Fragment and on the second I have cool content.

Here is the code of the fragment from which another is called

class HomeFragment: Fragment() {

    private lateinit var Quotes: TextView
    private var _binding: FragmentHomeBinding? = null
    private val binding: FragmentHomeBinding
    get() = _binding ?: throw RuntimeException("FragmentHomeBinding is null")

    override fun onAttach(context: Context) {
        super.onAttach(context)
    }

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

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

    private fun initViews(view: View){
        Quotes = view.findViewById(R.id.textViewQuotes)
    }

    private fun addListeners(view: View){
        view.setOnClickListener {
            if (binding.textViewQuotes.id.toString() == R.id.textViewQuotes.toString()){

                requireActivity().supportFragmentManager.beginTransaction()
                    .replace(R.id.homeFragment, ContentFragment.newInstance())
                    .commit()
            }
        }
    }
}

And here is the code of the fragment that is called

class ContentFragment: Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.content_fragment, container, false)
    }

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

    companion object {
        fun newInstance(): Fragment {
            return ContentFragment()
        }
    }

Answer 1

Well, actually, everything is clear.

transaction.replace(R.id.frame_layout, fragment)

and

.replace(R.id.homeFragment, ContentFragment.newInstance())

You are replaying fragments in different containers . Therefore, they are on the screen at the same time. Must be the same container.
Further rules of good manners:
A fragment (in your case - HomeFragment) does not have the moral right to take an activity and shove something into its fragment manager. This is not his responsibility. Moreover, he does not have the right to be pledged that there are views with a certain ID in the markup of the activity. At most, he can cast an activity to some interface and ask her to do something:

(requireActivity() as? CallbackInterface)?.showContentPlease(your awesome content)