[Projeto] Quando tento atualizar o produto(PUT) aparece Error no Axios(CRUD)

export type ListProdutos = {
    id: number;
    Quantidade: string;
    QMinima: string;
    Valor: string;
    Marca: string;
    Ação?: string;
    nome?: string;
    Descricao: string;
    Image: string;
    isCompleted?: boolean;
}

Código principal:

import React, { useEffect } from "react";
import { useNavigate, useParams  } from "react-router-dom";
import { Header } from "../../../Components/layout/Header";
import { ListProdutos } from "../../../service/api";
import axios from "axios";
import { useForm } from "react-hook-form";

export const EditProduto = () => {
    const navigate = useNavigate();
    const { id } = useParams();
    const  {register, handleSubmit, formState: {errors}, reset } = useForm<ListProdutos>()

    const onUpdate = ((data: any) =>  {
        axios.put(`http://localhost:3333/produtos/Edit-Produto/${id}`, data)
        .then(() => {
            alert("Deu certo!");
            navigate('/lista-produtos');
        })
        .catch((e) => {
            alert("Deu errado!");
            console.log('Error:', e)
        })
        console.log(onUpdate);
    })

    useEffect(() => {
        axios.get(`http://localhost:3333/produtos/${id}`)
        .then((response) => {
            reset(response.data);
        })
        .catch(()=> {
            alert("ERRRRRRROR!")
        })
    }, [id]);


        return(
        <>
            <Header />


        <form onSubmit={handleSubmit(onUpdate)}>
                <label htmlFor="quan">
                    <span>Quantidade</span>
                <input 
                    id="quan"
                    type='number'
                    {...register("Quantidade",{required: true})}
                />
                {errors.Quantidade && (<div>Quantidade não preenchida</div>)}
                </label>
                <label htmlFor="qmin">
                    <span>Q-Minima</span>
                <input 
                    id="qmin"
                    type='number'
                    {...register("QMinima",{required: true})}
                />
                {errors.QMinima && (<div>Quantidade Minima  não preenchida</div>)}
                </label>

                <label htmlFor="valor">
                    <span>Valor</span>
                <input 
                    id="valor"
                    type='number'
                    {...register("Valor",{required: true})}
                />
                {errors.Valor && (<div>Valor não preenchida</div>)}
                </label>

                <label htmlFor="marca">
                    <span>Marca</span>
                <input 
                    id="nmarca"
                    type='text'
                    {...register("Marca",{required: true})}
                />
                {errors.Marca && (<div>Marca não preenchida</div>)}
                </label>

                <label htmlFor="name">
                    <span>Nome Produto</span>
                <input 
                    id="name"
                    type='text'
                    {...register("nome",{required: true})}
                />
                {errors.nome && (<div>Nome não preenchida</div>)}
                </label>

                <label htmlFor="desc">
                    <span>Descrição</span>
                <textarea 
                {...register("Descricao",{required: true})} 
                id="desc"></textarea>
                {errors.Descricao && (<div>Descrição não preenchida</div>)}
                </label>

                <label htmlFor="img">
                    <span>Imagem</span>
                <input 
                    id="img"
                    type='file'
                    {...register("Image")}
                />
                {errors.Image && (<div>Image não preenchida</div>)}
                </label>

            <button type="submit" >
                Atualizar
            </button>
        </form> 


        </>
    )
}

#React