Android: after changing orientation, a duplicate layout appears under ScrollView

Question

The following image might further clarify my problem:

I have a RecyclerView that inside a ScrollView. Scrolling the view after changing the orientation produces an output like the screenshot. (NOTE: I'm not sure if changing orientation has anything to do with this issue as I can't scroll in portrait mode)

It is as if there are two identical layouts on top of each other, but when the user scrolls, only the topmost layout moves but the other one stays still.

Here's my xml code:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="@dimen/padding_16">

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/question_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_margin="@dimen/margin_8"
            android:adjustViewBounds="true"
            android:maxWidth="300dp"
            android:scaleType="centerInside"
            android:src="@drawable/zm_image_placeholder" />

        <TextView
            android:id="@+id/doubt_comment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/question_image"
            android:layout_alignParentEnd="true"
            android:layout_marginHorizontal="@dimen/margin_8"
            android:layout_marginStart="@dimen/margin_56"
            android:layout_marginEnd="@dimen/margin_8"
            android:fontFamily="@font/gothambook"
            android:paddingHorizontal="@dimen/padding_8"
            android:paddingVertical="@dimen/padding_4"
            android:text="This is the comment added by the student. This is the comment added by the student. This is the comment added by the student. "
            android:textSize="16sp" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/answer_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/doubt_comment"
            android:layout_alignParentStart="true"
            android:layout_margin="@dimen/margin_8"
            android:adjustViewBounds="true"
            android:maxWidth="300dp"
            android:scaleType="centerInside"
            android:src="@drawable/zm_image_placeholder" />

        <TextView
            android:id="@+id/doubt_answer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/answer_image"
            android:layout_alignParentStart="true"
            android:layout_marginTop="@dimen/margin_8"
            android:layout_marginEnd="@dimen/margin_56"
            android:fontFamily="@font/gothambook"
            android:paddingHorizontal="@dimen/padding_8"
            android:paddingVertical="@dimen/padding_4"
            android:text="This is the comment added by the student. This is the comment added by the student. This is the comment added by the student. "
            android:textSize="16sp" />

    </RelativeLayout>

</ScrollView>

Edit: This problem also occurs in portrait mode after I've changed orientation (portrait -> landscape -> portrait). If I don't change the orientation, everything works fine.