e.preventDefault() not working on next.js?

Question

Hello guys i am new to react.js and next.js, i tried to paste some data from a form and display it in the console, but once i use e.preventDefault() i can't even submit my form. Is there a better way to do what i am trying to do ? I went for the simpler way in my perspective.

import Header from '../components/header'
import Navbar from '../components/navbar'
import React, { useState } from 'react'





export default function Home({data}) {
  
  
  const [form, setForm] = useState({})

const saveMovie = e =>{
    e.preventDefault()
    console.log("Why i can't see you?")
    console.log(form) // not showing also 
  }  



  return (
    <div>


    { /* header */ }
    <Header />

    {/* Navbar */}
    <Navbar />


    {/*Liste des films */}

          
<form className="form p-10 md:w-2/3 lg:w-1/2 mx-auto rounded" onSubmit={ saveMovie }>
     <div className="shadow">
       <div className="flex items-center bg-regalblue rounded-t-lg border-blue-500 border">
         <label  className="w-20 text-right mr-8 p-4 text-white">Titre</label>
         <input  onChange={e=> setForm({...form, title: e.target.value})} type="text" name="title" id="title" placeholder="Entrez le titre du film" className="flex-1 p-4 pl-0 bg-transparent placeholder-gray-600  outline-none text-white overflow-ellipsis overflow-hidden"/>
       </div>
       <div className="flex items-center bg-regalblue  rounded-t-lg border-blue-500 border">
         <label className="w-20 text-right p-4 mr-8 text-white">Année</label>
         <input  onChange={e=> setForm({...form, year: +e.target.value})} type="text" name="year" id="year" placeholder="Entrez l'année" className="flex-1  p-4 pl-0 bg-transparent placeholder-gray-600 outline-none text-white overflow-ellipsis overflow-hidden"/>
       </div>    
        <div className="flex items-center bg-regalblue rounded-t-lg border-blue-500 border">
         <label  className="w-20 text-right mr-8 p-4 text-white">slug</label>
         <input  onChange={e=> setForm({...form, slug: e.target.value})} type="text" name="slug" id="slug" placeholder="Entrez le slug ici" className="flex-1 p-4 pl-0 bg-transparent placeholder-gray-600  outline-none text-white overflow-ellipsis overflow-hidden"/>
       </div>       
       <div className="flex items-center bg-regalblue rounded-t-lg border-blue-500 border">
         <label  className="w-20 text-right mr-8 p-4 text-white">description</label>
         <textarea onChange={e=> setForm({...form, description: e.target.value})}  type="textarea" name="description" id="description" placeholder="Entrez la description" className="flex-1 p-4 pl-0 bg-transparent placeholder-gray-600  outline-none text-white overflow-ellipsis overflow-hidden"/>
       </div>
     </div>
     <button type="submit" className="bg-regalblue hover:bg-gray-900 block w-full rounded-md border py-4 text-white font-bold shadow">Envoyer le formulaire </button>
</form>


      </div>
  )
}