React Router Dom, update component based on URL fails

I am making react-app for simple ecommerce site,with following routes

<Switch>
  <Route exact path='/' component={Home} />
  <Route path='/login' component={Login} />
  <Route path='/signup' component={Signup} />
  <Route exact path='/top-products' component={TopProducts} />
  <Route path='/product/list' component={ProductList} />
  <Route path='/products/details/:id' component={ProductDetails} />
</Switch>

All this is working well,except /products/details/:id

import React, { Component } from 'react'
import Navbar from '../Navbar/Navbar'
import Parser from 'html-react-parser';
import './ProductDetails.css'
import Search from '../search/search';
import ProductCard from '../ProductCard/ProductCard'
import { Redirect } from 'react-router-dom';

export default class ProductDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      data: [],
      recommendedData: [],
      id: this.props.match.id
    }
  }

  BASE_URL = 'https://upachar.com.np/'

  async componentDidMount() {
    console.log(this.props.match.params.id)
    const id = this.props.match.params.id
    const url = `${this.BASE_URL}api/v1/pharmacy/products/${this.props.match.params.id}`
    const response = await fetch(url)
    const data = await response.json()
    const recommendedUrl = this.BASE_URL + `api/v1/pharmacy/related-products/${this.props.match.params.id}`
    const recommendedResponse = await fetch(recommendedUrl)
    const recommendedData = await recommendedResponse.json()
    console.log('component did mount recommended product', recommendedData.data)
    this.setState({ data: data.data, loading: false, recommendedData: recommendedData.data })
  }

  componentDidUpdate(prevProps) {
    console.log('component did update')
    if (prevProps.match.params.id !== this.props.match.params.id) {
      console.log(prevProps.match.params.id, this.props.match.params.id)
      this.setState({ id: this.props.match.params.id })
    }
  }

  getImages = () => {
    return this.state.data.images.map(
      function (item, self) {
        const BASE_URL = this.BASE_URL.substring(0, this.BASE_URL.length - 1);
        return <img src={`${BASE_URL}${item}`} alt="image" style={{ 'height': '248px', 'width': '248px' }} />
      }, this)
  }

  getVariants = () => {
    return this.state.data.variants.map((item) => <div><ul>
      <p><b>Variant:</b> {item.name} <br /> <strong>Npr: </strong> {item.price}/{this.state.data.UOM.name}</p>
    </ul>
    </div>, this)
  }

  getRecommendedProducts() {
    return this.state.recommendedData.map((item) => {
      return <ProductCard
        title={item.name}
        UOM={item.UOM}
        price={item.price}
        image={item.thumbnails[0]}
        url={`/products/details/${item.id}`}
        manufacturer={item.manufacturer}
      />
    })
  }

  render() {
    if (this.state.loading) {
      return <h1>Loading...</h1>
    }
    return (
      <div>
        <Navbar />
        <Search />
        <div className="container">
          <h2 className='ProductDetails-title'>{this.state.data.name}</h2>
          <div className="row">
            <div className="col sm12 md6">
              <div className='ProductDetails-product-images'>{this.getImages()}</div>
            </div>

            <div className="col sm12 md3">
              <div className='ProductDetail-variants'>{this.getVariants()}</div>
            </div>
          </div>
          <div className='ProductDetails-details'>{Parser(this.state.data.details)}</div>
          <h4>Recommendations:</h4>
          <div className="ProductDetails-see-also">
            {this.getRecommendedProducts()}
          </div>
        </div>
      </div>
    )
  }
}

In this detials component, i am getting the id via. this.props.match.params.id and in componentDidMount() i fetch the the product details and also the details regarding the recommended products, and render them in as ProductCard component. The problem is whenever i click on Link to new product, the url changes, but the product details show the previous details. How can update this to show current product. I tried solving using ComponentDidUpdate but still i have the same issue.

ProductCard Component

import React from 'react'
import { Link, Redirect } from 'react-router-dom'
import { v4 as uuidv4 } from 'uuid';

export default function DisplayCard({ title,
  UOM,
  price,
  image,
  url,
  manufacturer }) {
  const BASE_URL = 'http://www.upachar.com.np';

  return (
    <div className="card" style={{ 'width': '248px', height: '428px', 'margin': '20px' }}>
      <div className="card-image waves-effect waves-block waves-light" style={{ 'cursor': 'default' }}>
        <img className="card-image" src={`${BASE_URL}/${image}`} style={{ 'width': '248px', height: '248px' }} />
      </div>
      <Link to={url}>
        <div className="card-content">
          <span className="card-title grey-text text-darken-4">{title}</span>
          <div>By: {manufacturer}</div>
          <div>Price : NPR.{price} per {UOM} </div>
        </div>
      </Link>
    </div>
  )
}

The url works if i refresh the browser manually. but not automatically when the url changes. I am trying to solve this from yesterday, with no luck. Please help me or point me toward the solution, Thank you.

PS. github link