onSubmit does nothing what is wrong? - reactjs

Question

I am trying to add an article using a form
It's supposed to create it on a thirdweb collection but it doesn't do anything when i'm hitting the button
My IDE ( VScode ) highlights image, Props, and FormEvent
It used to highlight File too but it doesn't do it anymore after this command npm install --save-dev #types/node
the console.log doesn't return anything when I click I don't know if the problem is e.preventDefault(); but I would like some help
My Thirdweb is well configured and should return a window with metamask to confirm the transaction (the transaction consisting of mining an nft and this is the equivalent of an insert in a database)
I thank you for your attention
import React, { FormEvent, useState } from 'react';
import { useRouter } from 'next/router';
import Header from '../components/Header';
import { useAddress, useContract } from '#thirdweb-dev/react';
import Image from 'next/image';
import Placeholder from '../images/placeholder.png';
type Props = {
name: string;
description: string;
image: File;
}
function addItem({}: Props) {
const { contract } = useContract(
process.env.NEXT_PUBLIC_COLLECTION_CONTRACT,
"nft-collection"
);
const address = useAddress();
const router = useRouter();
const [preview, setPreview] = useState<string>();
const [image, setImage] = useState<File>();
const mintNft = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!contract || !address) return;
console.log(contract, address, image);
if (!image) {
alert("Please select an image");
return;
}
const target = e.target as typeof e.target & {
name: { value: string };
description: { value: string };
};
const metadata = {
name: target.name.value,
description: target.description.value,
image: image,
};
try {
const tx = await contract.mintTo(address, metadata);
const receipt = tx.receipt; // the transaction receipt
const tokenId = tx.id; // the id of the NFT minted
const nft = await tx.data(); // (optional) fetch details of minted NFT
console.log(receipt, tokenId, nft);
await router.push("/");
} catch (error) {
console.error(error);
}
};
return (
<div>
<Header />
<main className="max-w-6xl mx-auto p-10 border">
<h1 className="text-4xl font-bold">Add an Item to the Marketplace</h1>
<h2 className="text-xl font-semibold pt-5">Item Details</h2>
<p className="pb-5">
By adding an item to the marketplace, you're essentially Minting an
NFT of the item into your wallet which we can then list for sale!
</p>
<div className="flex flex-col justify-center items-center md:flex-row md:space-x-5 pt-5">
<Image
className="border h-80 w-80 object-contain" // object-contain is the same as object-fit: contain / permet de ne pas déformer l'objet
alt="Placeholder"
src={preview || Placeholder}
width={500}
height={500}
/>
<form onSubmit={mintNft} className="flex flex-col flex-1 p-2 space-y-2" >
<label className="font-light">Name of Item</label>
<input
className="formField"
placeholder="Name of item..."
type="text"
name="name"
id="name"
/>
<label className="font-light">Description</label>
<input
className="formField"
placeholder="Enter Description..."
type="text"
name="description"
id="description"
/>
<label className="font-light">Image of the Item</label>
<input
type="file"
onChange={(e) => {
if (e.target.files?.[0]) {
setPreview(URL.createObjectURL(e.target.files[0]));
setImage(e.target.files[0]);
}
}}
/>
<button
type="submit"
className="bg-blue-600 font-fold text-white rounded-full py-4 px-10 w-56 mx-auto md:mt-auto md:ml-auto"
>
Add/Mint Item
</button>
</form>
</div>
</main>
</div>
)
}
export default addItem;