how can i manage the sate of my project i want to use redux for that but on class based compoennts

Question

i want to use redux to manage the state of my application i know it is very easy to do this with function based compoenents because we have the useDispatch and useSelector but in the case of class based component we have what after struggling a lot of research i manage to find this super demo project which explain how we can use the state management in the class based compoents but when i go to use that they have used this createStore import { createStore } from "redux"; which using i am getting error that createStore has been deprecated just see the error below line

@deprecated
We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.

Redux Toolkit is our recommended approach for writing Redux logic today, including store setup, reducers, data fetching, and more.

For more details, please read this Redux docs page: https://redux.js.org/introduction/why-rtk-is-redux-today

I visited that place link but probably i am lost please help show me that way i want to state management smoothly its ok if i write more code but i want to do it i am bound to use class based component because i am writing a test

-----------------------------------------------------------------------------------------

Now i am able to do the global state but still wondering how we can read the data and show it in our UI i have tried useSelector in all possible ways can anyone suggest me how can i do that

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { increment,decrement } from '../features/counterSlice'
import { useSelector } from 'react-redux'
export class ClassTest extends Component {
    constructor(props){
        super(props)
        console.log("the props are",this.props)
    }

    increase(){
        this.props.increment();
        console.log("Hello")
    }
    decrease(){
        this.props.decrement();
        console.log("Hello")
    }

    componentDidMount(){
        const count = this.props.useSelector()
        console.log(count)
    }
  render() {
    return (
      <div>
          <button onClick={()=>{this.increase()}}>Increase Me</button>
          <button onClick={()=>{this.decrease()}}>Increase Me</button>
      </div>
    )
  }
}

export default connect(null,{increment,decrement,useSelector}) (ClassTest);