Design Page Disappeared in Android Studio when Using Tab Layout

I was trying to use Tab Layout in my project. Whenever I add a TabLayout to the linear layout the design page disappears. Refreshing doesn't work. I can't even see the tab items in the component tree. But when I run this activity in a phone, it looks exactly how it should. But can't see the design panel. Have a look-

Before

After

The XML code below in case there is a problem there, though I highly doubt it-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E9EDBD"
android:orientation="vertical"
tools:context=".ChattyActivity">
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tuesday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Wednesday" />
</com.google.android.material.tabs.TabLayout>
</LinearLayout>

There are three Render Errors which are-

First Error
Style ResourceReference{namespace=apk/res-auto, type=attr, name=textAppearanceButton} is not of type STYLE (instead attr)

Second Error
Failed to find style with 2131033000

Third Error

java.lang.NullPointerException
at android.content.res.Resources_Theme_Delegate.obtainStyledAttributes(Resources_Theme_Delegate.java:74)
at android.content.res.Resources$Theme.obtainStyledAttributes(Resources.java:1631)
at android.content.Context.obtainStyledAttributes(Context.java:874)
at android.widget.TextView.setTextAppearance(TextView.java:3965)
at androidx.appcompat.widget.AppCompatTextView.setTextAppearance(AppCompatTextView.java:216)
at com.google.android.material.textview.MaterialTextView.setTextAppearance(MaterialTextView.java:106)
at android.widget.TextView.setTextAppearance(TextView.java:3954)
at androidx.core.widget.TextViewCompat.setTextAppearance(TextViewCompat.java:289)
at com.google.android.material.tabs.TabLayout$TabView.updateTab(TabLayout.java:2824)
at com.google.android.material.tabs.TabLayout$TabView.update(TabLayout.java:2853)
at com.google.android.material.tabs.TabLayout$TabView.setTab(TabLayout.java:2765)
at com.google.android.material.tabs.TabLayout.createTabView(TabLayout.java:1725)
at com.google.android.material.tabs.TabLayout.newTab(TabLayout.java:1008)
at com.google.android.material.tabs.TabLayout.addTabFromItemView(TabLayout.java:876)
at com.google.android.material.tabs.TabLayout.addViewInternal(TabLayout.java:1782)
at com.google.android.material.tabs.TabLayout.addView(TabLayout.java:1772)
at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:1131)
at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:72)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:1101)
at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1088)
at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:1130)
at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:72)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:1101)
at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1088)
at android.view.LayoutInflater.inflate(LayoutInflater.java:686)
at android.view.LayoutInflater.inflate(LayoutInflater.java:505)
at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:360)
at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:443)
at com.android.tools.idea.layoutlib.LayoutLibrary.createSession(LayoutLibrary.java:121)
at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:722)
at com.android.tools.idea.rendering.RenderTask.lambda$inflate$9(RenderTask.java:879)
at com.android.tools.idea.rendering.RenderExecutor$runAsyncActionWithTimeout$3.run(RenderExecutor.kt:194)
at com.android.tools.idea.rendering.RenderExecutor$PriorityRunnable.run(RenderExecutor.kt:292)
at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
at java.base/java.lang.Thread.run(Thread.java:829)

I tried to google this problem but I couldn't find anything helpful. The solutions I found are not really relatable with this problem, even if it is I couldn't understand. I tried reopening android studio, reopening project, deleting the XML file and creating a new one with exact same code in it. refreshing activity over and over.

Later I found a solution to this problem. So I will leave the answer here in case someone needs it.
The solution is very easy actually. You just need to use a lower version of android material to avoid rendering problem.

1. First go to the build:gradle(Module:app)
2. Find dependencies and locate implementation 'com.google.android.material:material:(whatever version you have here)
3. Now overwrite this line with implementation 'com.google.android.material:material:1.7.0'
4. Click sync now.

This should solve the problem, now that you are using 1.7.0 version. Hope it helped you.