I have a form I would like to instead of using the button to go to the next step, Use the radio button.

Is it possible to do this in Next js?

import React, { useState } from "react";
import { Form, Card, Button } from "react-bootstrap";
import mentorStyles from "../../../../styles/users/pages/MentorReserve.module.css";

const Steptwo = ({ nextStep }) => {
  const [validated, setValidated] = useState(false);

  const [formData, setFormData] = useState({
    time: "",
  });

  const handleSubmit = (event) => {
    const form = event.currentTarget;

    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
      setValidated(true);
    } else {
      event.preventDefault();
      nextStep();
    }
  };

  return (
    <>
      <Form noValidate validated={validated} onSubmit={handleSubmit}>
        <div className="row row-cols-5 w-atuo ">
          <div className="col">
            <div className="row row-cols-1">
              <div
                className={`col d-flex bg-success rounded text-white h-75-px w-75 align-items-center justify-content-center ${mentorStyles.h_75_px}`}
              >
                <span className="text-center">1 مهر 1401</span>
              </div>
              <div
                className={`col d-flex mt-1 rounded border w-75 align-items-center justify-content-center ${mentorStyles.h_75_px} ${mentorStyles.hover_border_radio}`}
              >
                <label
                  className={` ${mentorStyles.container}`}
                >
                  11:00 ق.ظ
                  <input
                    type="radio"
                    name="time"
                    onChange={(event) =>
                      setFormData({
                        ...formData,
                        time: event.target.value,
                      })
                    }
                    value={formData.time}
                  />
                  <span className={` ${mentorStyles.checkmark}`}></span>
                </label>
              </div>
               ...
      </Form>
          ...
    </>
  );
};

export default Steptwo;

You can see the photo of the stage below

enter image description here

I hope someone can help me :)

And

I hope you understand what I mean :)

If someone else asked this answer before me and got an answer, please link it.