import { useEasybase } from 'easybase-react';
import { useEffect, useState } from "react";





function NewSked() {
  const { db } = useEasybase();
  const[name, setName] = useState("");
  const[time, setTime] = useState(0);
  const[duration, setDuration] = useState(0);
  const[date, setDate ] = useState("");
  const HandleSubmit = (evt) => {
      evt.preventDefault();
    }
  const HandleNewSked = async() => {
    try {
      const inDate = date;
      const inDuration = duration;
      const inTime = time;
      const inName = name;
      if (!inDate || !inDuration || !inName || !inTime) return;

      await db('CALENDAR').insert({
      name: inName,
      start_time: inTime,
      sked_date: inDate,
      duration: inDuration
    }).one();
    } catch(_) {
      alert("Error on input format");
    }
  }

  return (
    <form onSubmit={HandleNewSked} className="newSkedForm">
      <label>Title:</label>
          <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <label>Time:</label>
          <select name="time" value={time} onChange={e => setTime(e.target.value)}>
            <option value="00:00">12:00 am</option>
            <option value="00:30">12:30 am</option>
          </select>
      <label>Duration:</label>
        <input type="number" value={duration} onChange={e => setDuration(e.target.value)}/>
        <label>Date:</label>
        <input type="date" value={date} onChange={e => setDate(e.target.value)} />
      <button type="submit" className="submitButton" onClick={SubmitNewSked}>✔️</button>
    </form>
    )
}

export default NewSked;

Whenever I submit the form, nothing happens. I'm new to react and js/jsx in general. I'm using easybase for this project. Basically, I'm trying to insert data from a form into a database. I also have another component that displays the current schedule, that works fine though.