React js how can i use css modules

[oguzhanefe32]

im currently using a component on two different page one is home page and one is product page and when i change the css of the product page the home page is also changing when i use the classes of the component
how can i style the classes of this component for each css pages differently.
heres the component

import React from "react";
import { useStateValue } from "./StateProvider";
import { Link } from 'react-router-dom';

function Product({ title, image, price, rating, discount }) {
  const [{ basket }, dispatch] = useStateValue();

  const addToBasket = () => {

    

    dispatch({
      type: 'ADD_TO_BASKET',
      item: {
        title: title,
        image: image,
        price: price,
        rating: rating,
      },
    });
  };

  



  function showToast(text){
    var x=document.getElementById("toast");
    x.classList.add("show");
    x.innerHTML=text;
    setTimeout(function(){
      x.classList.remove("show");
    },3000);
  }
  

  return (
   
      <div className="product">
      
      <p className="product__title">{title}</p>
      <p className="product__price">
        <small>$</small>
        <strong>{price}</strong>
      </p>
      <p className="product__discount">{discount}</p>
      <img src="{image}" alt="" />
      <button onClick={() => { addToBasket(); showToast('Added to cart');}} id="ee" className="addtobasket">
        Add to Basket
      </button>
      <button className="buynow">Buy Now</button>
      <div id="toast">
      </div>
    </div>

  );
}

export default Product;