Tengo un formulario Me gustaría en lugar de usar el botón para ir al siguiente paso , Usar el botón de opción .

¿Es posible hacer esto en 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;

Puedes ver la foto del escenario a continuación.

ingrese la descripción de la imagen aquí

Espero que alguien pueda ayudarme :)

Y

Espero entiendas lo que quiero decir :)

Si alguien más preguntó esta respuesta antes que yo y obtuvo una respuesta, por favor vincúlela.