React.js Uncaught TypeError: Cannot read properties of undefined (reading 'params')

So I'm getting an error message - Uncaught TypeError: Cannot read properties of undefined (reading 'params')

*error image

I got this error when I was working update productId . I tried to solve problem but I could not solve this i don't know how I solve this plz someone solve my problem where I will definde params

**this code

import React,{useEffect, useState} from 'react'
import Base from "../core/Base";
import { Link  } from "react-router-dom";
import { getCategories, getProduct, updateProduct } from "./helper/adminapicall";
import { isAutheticated } from "../auth/helper/index";


const UpdateProduct = ({ match}) => {
    const {user, token} = isAutheticated();
    const [values, setValues] = useState({
    name: "",
    description: "",
    price: "",
    stock: "",
    photo: "",
    categories: [],
    category: "",
    loading: false,
    error: "",
    createdProduct: "",
    getaRedirect: false,
    formData: new FormData(),
  }) ; 

 const {
    name,
    description,
    price,
    stock,
    categories,
    category,
    loading,
    error,
    createdProduct,
    getaRedirect,
    formData  
  } = values;

  ;
//load product in form
const preload = productId => {
  
    getProduct(productId).then(data => {
      //console.log(data);
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        preloadCategories();
        setValues({
          ...values,
          name: data.name,
          description: data.description,
          price: data.price,
          category: data.category._id,
          stock: data.stock,
          formData: new FormData()
        });
      }
    });
  };

  const preloadCategories = () => {
    getCategories().then(data => {
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        setValues({
          categories: data,
          formData: new FormData()
        });
      }
    });
  };

  
  useEffect(() => {
    preload(match.params.productId);
  }, []);


   const handleChange = name => event =>{
        const value = name === "photo"? event.target.files[0]:event.target.value;
        formData.set(name, value);
        setValues({...values, [name]: value});
   }

//ToDO work on it backend 
const onSubmit  = event =>{
    event.preventDefault();
    setValues({...values, error: "", loading: true});
    updateProduct(match.params.productId, user._id, token, formData).then(data=>{
        if (data.error) {
            setValues({...values, error: data.error});
        }else{
            setValues({ ...values, 
             name: "",
            description: "",
            price: "",
            photo: "",
            stock: "",
            loading: false,
            createdProduct: data.name})
        }
    });
}


const createProductForm = () => (
    <form>
      <span>Post photo</span>
      <div className="form-group">
        <label className="btn btn-block btn-success">
          <input
            onChange={handleChange("photo")}
            type="file"
            name="photo"
            accept="image"
            placeholder="choose a file"
          />
        </label>
      </div>
      <div className="form-group">
        <input
          onChange={handleChange("name")}
          name="photo"
          className="form-control"
          placeholder="Name"
          value={name}
        />
      </div>
      <div className="form-group">
        <textarea
          onChange={handleChange("description")}
          name="photo"
          className="form-control"
          placeholder="Description"
          value={description}
        />
      </div>
      <div className="form-group">
        <input
          onChange={handleChange("price")}
          type="number"
          className="form-control"
          placeholder="Price"
          value={price}
        />
      </div>
      <div className="form-group">
        <select
          onChange={handleChange("category")}
          className="form-control"
          placeholder="Category"
        >
          <option>Select</option>
          {categories &&
            categories.map((cate, index) => (
              <option key={index} value={cate._id}>
                {cate.name}
              </option>
            ))}
        </select>
      </div>
      <div className="form-group">
        <input
          onChange={handleChange("stock")}
          type="number"
          className="form-control"
          placeholder="Stock"
          value={stock}
        />
      </div>

      <button
        type="submit"
        onClick={onSubmit}
        className="btn btn-outline-success mb-3"
      >
        Update Product
      </button>
    </form>
  );
  

  return (
    <Base title='Add a product here!' 
      description='Welcome to product creation section'
      className='container bg-info p-4'>
      <Link to="/admin/dashboard" className="btn btn-md btn-dark mb-3">
        Admin Home
      </Link>
      <div className="row bg-dark text-white rounded">
        <div className="col-md-8 offset-md-2">
           
           
           {createProductForm()}
         
         </div>
        </div>
    </Base>
  );
};

export default UpdateProduct;

    enter code here

How to solve this