Pagina do api:

import axios from 'axios';
import { ErrorMsg } from './ErrorMsg';

export interface ListProdutos {
    id: number;
    Quantidade: string;
    QMinima: string;
    Valor: string;
    Marca: string;
    Ação?: string;
    nome?: string;
    Descricao: string;
    Image: string;
    isCompleted?: boolean;
}
const http = axios.create({
    baseURL: 'http://localhost:3333'
})
export const api = {
    getAll: async(): Promise<ListProdutos[] | ErrorMsg > => { 
        try{
            let response = await http.get(`/produtos`);
            return response.data;
        } catch (error: any) {
            return new ErrorMsg(error.message || 'Error ao consutar os Produtos.' );
        }
    },
    getAllId: async(id: number): Promise<ListProdutos | ErrorMsg > => { 
        try{
            let { data } = await http.get(`/produtos/${id}`);
            return data;
        } catch (error: any) {
            return new ErrorMsg(error.message || 'Error ao consutar o Produto.' );
        }
    },
    AddNew: async(dataCreate: Omit<ListProdutos, 'id'>): Promise<ListProdutos | ErrorMsg > => { 
        try{
            let { data } = await http.post<any>(`/produtos`, dataCreate);
            return data;
        } catch (error: any) {
            return new ErrorMsg(error.message || 'Error ao criar Produto.' );
        }
    },
    UpdateById: async(id: number, dataUpdate: ListProdutos): Promise<ListProdutos | ErrorMsg > => { 
        try{
            let { data } = await http.put(`/produtos/${id}`, dataUpdate);
            return data;
        } catch (error: any) {
            return new ErrorMsg(error.message || 'Error ao atualizar os Produto.' );
        }
    },
    DeleteById: async(id: string): Promise<undefined | ErrorMsg > => { 
        try{
            let { data } = await http.delete(`/produtos/${id}`);
            return data;
        } catch (error: any) {
            return new ErrorMsg(error.message || 'Error ao Apagar Produto.' );
        }
    }
}

error: [object%20Object] 404 (Not Found)

Pagina editora: ` import React, { FormEvent, useEffect, useState } from "react"; import { Header } from "../../../Components/layout/Header"; import { api, ListProdutos } from "../../../service/api"; import { ErrorMsg } from "../../../service/ErrorMsg"; export const EditProduto = (id: number) => {

const [Tab, setTable] = useState<ListProdutos []>([])
const [Quantidade, setQuantidade] = useState('');
const [QMinima, setQMinima] = useState('');
const [Valor, setValor] = useState('');
const [Marca, setMarca] = useState('');
const [Ação, setAcao] = useState('Visualizar');
const [Descricao, setDescricao] = useState('');
const [Image, setImg] = useState('');
const UpdateForm = Tab.find((produto) => produto.id === id)
console.log(Tab);
useEffect(()=> {
    api.UpdateById(id,{
        ...UpdateForm, 
        Quantidade, QMinima, Valor, Marca, Descricao, Image, id
    })
    .then((result) => {
        if(result instanceof ErrorMsg) {
            alert(result.message)
        } else {
            setTable(oldUp => {
                return oldUp.map(item => {
                    if(item.id === id) return result;

                    return item;
                });
            });
        }
    })
}, [Tab])
const handleAddDados = (e:FormEvent) => {
    e.preventDefault();
    
    return(
    <>
        <Header />


    <form onSubmit={handleAddDados}>
            <label htmlFor="">
                <span>Quantidade</span>
            <input 
                type='number'
                name="quantidade"
                className="py-4 px-3 bg-gray-900 rounded w-full text-gray-200 text-xs placeholder:text-gray-400 outline-none"
                onChange={e => setQuantidade(e.target.value)}    
                value={Quantidade}
            />
            </label>
            <label htmlFor="">
                <span>Q-Minima</span>
            <input 
                type='text'
                className="py-4 px-3 bg-gray-900 rounded w-full text-gray-200 text-xs placeholder:text-gray-400 outline-none"
                onChange={e => setQMinima(e.target.value)}    
                value={QMinima}
            />
            </label>
            <label htmlFor="">
                <span>Valor</span>
            <input 
                type='number'
                className="py-4 px-3 bg-gray-900 rounded w-full text-gray-200 text-xs placeholder:text-gray-400 outline-none"
                onChange={e => setValor(e.target.value)}    
                value={Valor}
            />
            </label>
            <label htmlFor="">
                <span>Marca</span>
            <input 
                type='text'
                className="py-4 px-3 bg-gray-900 rounded w-full text-gray-200 text-xs placeholder:text-gray-400 outline-none"
                onChange={e => setMarca(e.target.value)}    
                value={Marca}
            />
            </label>

            <label htmlFor="">
                <span>Ação</span>
            <input 
                type='hidden'
                className="py-4 px-3 bg-gray-900 rounded w-full text-gray-200 text-xs placeholder:text-gray-400 outline-none"   
                onChange={e => setAcao(e.target.value)}    
                value={Ação}
            />
            </label>

            <label htmlFor="desc">
                <span>Descrição</span>
                <textarea 
                name="" id="desc"
                onChange={e => setDescricao(e.target.value)}    
                value={Descricao}></textarea>
            </label>
            <label htmlFor="">
                <input 
                type="file" 
                onChange={e => setImg(e.target.value)}
                value={Image}
                />
            </label>
        <button type="submit" >
            Atualizar
        </button>
    </form> 
    

    </>
)}

} `