Estoy en proceso de implementar un sistema de reserva de habitaciones. Quiero agregar de 2 a 4 tipos de habitaciones diferentes, pero trato de agregar un menú desplegable para que pueda elegir entre los 2 a 4 tipos de habitaciones y que no lo escriba usted mismo, estoy usando/siguiendo esto . He intentado aplicar <Form.Select...>, eso no funcionó.

He buscado por todas partes pero no he podido encontrar nada útil.

 "react": "^17.0.2", "react-bootstrap": "^1.6.4",

Aquí está mi código:

 <Form.Row className="mb-lg-3"> <Form.Group as={Col} controlId="roomTypeSelection" lg="4" md="12"> <Form.Label>Room Type:<span className="text-danger">*</span></Form.Label> <Form.Control ref={manufacturerInputRef} onChange={handleChange} name="roomTypeSelection" value={values.roomTypeSelection} type="text" placeholder="Type your desired room..." isInvalid={!!errors.roomTypeSelection} isValid={touched.roomTypeSelection && !errors.roomTypeSelection} /> <Form.Control.Feedback type="invalid"> {errors.roomTypeSelection} </Form.Control.Feedback> </Form.Group> </Form.Row>

Intenté implementar (tomado del sitio al que me he vinculado) en mi código anterior, pero no funciona en conjunto, funciona por separado:

 <Form.Select> <option>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </Form.Select>

Eso me dio una pantalla en blanco en mi página.

¿Cómo debo hacer eso e implementar un menú desplegable dentro de los formularios? ¿Cómo funciona la configuración de Form.Control? ¿Cómo puedo agregar una lista desplegable en lugar de texto? ¿Hay una palabra clave para eso?