Reactjs – Unable to render, REACT

I am a newbie to web-dev and learning React. I have used ZOD for form implementation. My IDE is not showing any errors but when I click on submit button, screen doesn’t gets re-render. It would be nice if someone can help me out. I know its a small issue, but I have been scratching my head for over a day.

APP.TSX
import { useEffect, useState } from "react";
import StudentGradingEvaluationForm, {
  StudentFormData,
} from "./Components/StudentGradingEvaluationForm";
import GPACalculator from "./Components/GPACalculator";
import "./Components/Courses";

const App = () => {
  const [formData, setFormData] = useState<StudentFormData | null>(null);
  const [isFormSubmitted, setIsFormSubmitted] = useState(false);

  const handleFormSubmitted = (data: StudentFormData) => {
    if (data) {
      setFormData(data);
      setIsFormSubmitted(true);
    }
  };

  const resetForm = () => {
    setFormData(null);
    setIsFormSubmitted(false);
  };

  return (
    <>
      <div style={{ textAlign: "center" }}>
        <h1>GPA Calculator for Individual Student</h1>
      </div>
      <div>
        {!isFormSubmitted && (
          <StudentGradingEvaluationForm onSubmit={handleFormSubmitted} />
        )}
        {isFormSubmitted && !formData && (
          <p className="text-danger">Enter correct credentials</p>
        )}
      </div>
      {formData && (
        <button className="btn btn-outline-danger" onClick={resetForm}>
          Reset Form
        </button>
      )}
      {formData && formData.courses && (
        <GPACalculator
          subject={formData.courses}
          number={formData.number}
          name={formData.name}
        />
      )}
    </>
  );
};

export default App;

StudentGradingEvaluationForm.tsx

import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import courses from "./Courses";

const schema = z.object({
  name: z
    .string()
    .min(3, { message: "Description should be atleast 3 characters." }),
  number: z.number().min(0).max(100),
  courses: z.enum(courses, {
    errorMap: () => ({ message: "Course is required." }),
  }),
});

export type StudentFormData = z.infer<typeof schema>;

interface Props {
  onSubmit: (data: StudentFormData) => void;
}

const StudentGradingEvaluationForm = ({ onSubmit }: Props) => {
  const { register, handleSubmit } = useForm<StudentFormData>({
    resolver: zodResolver(schema),
  });

  return (
    <form
      onSubmit={handleSubmit((data) => {
        onSubmit(data);
        console.log(onSubmit);
      })}
    >
      <div className="mb-3">
        <label htmlFor="studentName" className="form-label">
          Name of Student
        </label>
        <input
          id="studentName"
          type="text"
          className="form-control"
          {...register("name")}
        />
      </div>
      <div className="mb-3">
        <label htmlFor="courseName" className="form-label">
          Name of Course
        </label>
        <div>
          <select
            id="courseName"
            className="select-control"
            {...register("courses")}
          >
            <option value=""></option>
            {courses.map((course) => (
              <option key={course} value={course}>
                {course}
              </option>
            ))}
          </select>
        </div>
      </div>
      <div className="mb-3">
        <label htmlFor="number" className="form-label">
          Enter Number
        </label>
        <input
          id="number"
          type="number"
          className="form-control"
          {...register("number")}
        />
      </div>
      <button type="submit" className="btn btn-primary">
        Submit
      </button>
    </form>
  );
};

export default StudentGradingEvaluationForm;

Courses.ts

const courses = [
  "Mechanics of Materials - I",
  "Fluid Dynamics - I",
  "Ordinary Differential Equations",
  "Thermodynamics - II",
  "Basic Electrical and Electronics Engineering",
] as const;

export default courses;

GPACalculator.tsx

interface Props {
  subject: string;
  name: string;
  number: number;
}
const GPACalculator = ({ subject, number, name }: Props) => {
  const calculateGpa = () => {
    if (number < 100 && number >= 80) return "A";
    else if (number < 80 && number >= 65) return "B";
    else if (number < 65 && number >= 55) return "C";
    else if (number < 55 && number >= 40) return "D";
    else return "FAIL";
  };
  return (
    <div>
      <h2>GPA Calculator Result for {name}</h2>
      <p>Subject: {subject}</p>
      <p>Number: {number}</p>
      <p>GPA: {calculateGpa()}</p>
    </div>
  );
};

export default GPACalculator;

I have used following dependencies:

npm create [email protected] npm i bootstrap npm i zod npm i [email protected] npm i @hookform/[email protected]

VS Code isn’t showing any error. Soon as I click on submit button, nothing happens. I believe my code is simple and self-explanatory. Looking forward for help.