AxiosError request failed with status code 404

I´ve been trying to edit a product through a form in my component. Im using Laravel 9 for my api and ReactJS for my frontend. But when i submit my form i have an axios error.

		AxiosError request failed with status code 404

And this is my component where i have implemented axios and my form.

				import React, {useState, useEffect} from 'react'
				import axios from 'axios';
				import {useNavigate, useParams} from 'react-router-dom';


				const endpoint = 'http://localhost:8000/api/product/'


			const EditProducts = () => {

					const [description, setDescription] = useState('');
					const [price, setPrice] = useState(0);
					const [stock, setStock] = useState(0);
					const navigate = useNavigate();
					const {id} = useParams();

					const update = async(e) =>{
						e.preventDefault();
					 await axios.put(`${endpoint}${id}`, {
    						description:description,
    						price:price,
   						stock:stock
						})
						navigate('/');
					}

					useEffect(()=>{
  						const getProductById = async() =>{
      						const response = await axios.get(`${endpoint}${id}`)
      						setDescription(response.data.description)
      						setPrice(response.data.price)
      						setStock(response.data.stock)
  						}

  						getProductById();
					}, [])

					return (
						<div>
   						 <h3>Edit Product</h3>
    						<form onSubmit={update}>
       						 <div className='mb-3'>
            						<label className='form-label'>Description</label>
            						<input
               						 value={description}
                						onChange={(e)=>setDescription(e.target.value)}
                						type='text' 
               						 className='form-control'
            						/>
        						</div>
        						<div className='mb-3'>
            						<label className='form-label'>Price</label>
            						<input
                						value={price}
                						onChange={(e)=>setPrice(e.target.value)}
                						type='number'   
                						className='form-control'
            						/>
        						</div>
        						<div className='mb-3'>
            						<label className='form-label'>Stock</label>
            						<input
                						value={stock}
                						onChange={(e)=>setStock(e.target.value)}
               						 type='number'   
               						 className='form-control'
           						 />
        						</div>
        						<button type='submit' className='btn btn-primary'>Update</button>
    						</form>
						</div>
					)
					}

					export default EditProducts

And this is my route and controller in my api

				public function update(Request $request, $id)
					{
    					//
    					$product = Product::findOrFail($request->$id);
    					$product->description = $request->description;
    					$product->price = $request->price;
    					$product->stock = $request->stock;

    					$product->save();
    					return $product;
}

					Route::controller(ProductController::class)->group(function(){

Route::put('/product/{id}', 'update');
   

});