How to fix Gray screen with androidx.constraintLayout text in android studio

I am learning android development I have this problem with my design view of my android studio that shows gray background with androidx.constraintLayout.constraintLayout text in the middle

xml design view snapshot

Now i tried solutions stated in Why is my design screen gray and only says "androidx.constraintlayout.ConstraintLayout" in Android Studio? I added dependencies { implementation "androidx.constraintlayout:constraintlayout:2.0.0-beta4" } in build.gradle and android:id="@+id/constraintLayout" in my xml file

I also tried: rebuilding the project, invalidating cache and the solution provided in the issue tab which is:

    The following classes could not be instantiated:
    - androidx.constraintlayout.widget.ConstraintLayout 
(Open Class, Show Exception, Clear Cache)
     Tip: Use View.isInEditMode() in your custom views to skip code or show sample data when shown in the IDE.  
If this is an unexpected error you can also try to build the project, then manually refresh the layout.

but found no luck

here is my gradle.build app dependency:

dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation "androidx.constraintlayout:constraintlayout:2.0.0-beta4"
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
implementation 'androidx.appcompat:appcompat:1.3.1'
implementation 'androidx.constraintlayout:constraintlayout:2.1.1'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

}

here is my xml file:

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

here is my gradle.properties

    org.gradle.jvmargs=-Xmx1024m
# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true
# AndroidX package structure to make it clearer which packages are bundled with the
# Android operating system, and which are packaged with your app's APK
# https://developer.android.com/topic/libraries/support-library/androidx-rn
android.useAndroidX=true
# Automatically convert third-party libraries to use AndroidX
android.enableJetifier=true

ANDROID STUDIO version = 3.6.3 running 32 bit SDK version = 26.1.1

I had the same problem But I fix it by delete

implementation 'androidx.constraintlayout:constraintlayout:2.1.1'

and use

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

only

I don't know what caused that problem, but I hope that will help you.