React Class Component is not changing with the change of its props

Question

I want to load data dynamically using graphql. Created an HOC to get the params from props. The props is changing but data is not being loaded with it. Done the same thing to create dynamic product description page and that's working perfectly.

I am sending the category name dynamically from the NavBar Component:

                <div>
                    {
                        categories.map((category, index) =>
                            <Link key={index} to={`/${category.name}`}>{category.name.toUpperCase()}</Link>
                        )
                    }
                </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Here is the Routing part:

class App extends Component {

  render() {
    return (
      <div>
        <ContextProvider>
          <Navbar></Navbar>
          <Routes>
            <Route path='/' element={<All></All>}></Route>
            <Route path='/:categoryName' element={<CategoryWiseProducts />}></Route>
            <Route path='/cartPage' element={<CartPage></CartPage>}></Route>
            <Route path='/productDescription/:id' element={<ProductDescription />}></Route>
          </Routes>
        </ContextProvider>
      </div>
    );
  }
}

export default App;

This is the component where I want to show products dynamically:

function withParams(Component) {
    return props => <Component {...props} params={useParams()} />;
}

class CategoryWiseProducts extends Component {
    static contextType = GlobalContext;
    constructor(props) {
        super(props);
        this.state = {
            providedData: {},
        }
    }
    getData(category) {
        const query = gql`
    {
      category(input: { title: "${category}" }) {      
        name
        products {
          id
          name
          gallery
          prices{
            currency{
              label
              symbol
            }
            amount
          }
          inStock
            attributes{
                id
                name
                type
                items{
                    displayValue
                    value
                    id
                }
            }
        }
      }
    }
    `
        request('http://localhost:4000', query)
            .then(data => this.setState({ providedData: data.category }, () => {
            }))

    }

    componentDidMount() {
        const { categoryName } = this.props.params;
        this.getData(categoryName);
        console.log("this is props", this.props);

    }

    render() {
        const { providedData } = this.state;
        const { name, products } = providedData;
        const { openCartOverlay } = this.context;

        console.log("this is data:", providedData, typeof providedData);

        return (
            <div className='container'>
                <h1>{name}</h1>
                <div className='allProducts'>
                    {
                        products?.map(product => <SingleProductCard product={product}></SingleProductCard>)
                    }
                </div>
                <SelectAtrributeDrawer></SelectAtrributeDrawer>
                <div style={{ display: `${openCartOverlay ? "block" : "none"}` }} className='overlayContainer'>
                    <CartOverlay></CartOverlay>
                </div>
            </div>
        );
    }
}

export default withParams(CategoryWiseProducts);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>