Tengo una aplicación web con ReactJs y NextJs. En un componente funcional, he usado react-select entonces, recibo la siguiente advertencia de consola:

Advertencia: la id de la propiedad no coincide. Servidor: "reaccionar-seleccionar-7-entrada" Cliente: "reaccionar-seleccionar-2-entrada"

Mis códigos son los siguientes:

 import { Row, Col, Card, Form, Button } from 'react-bootstrap'; import Select from 'react-select'; const priorityOptions = [ { value: 'p1', label: 'Top level - P1' }, { value: 'p2', label: 'Mid level - P2' }, { value: 'p3', label: 'Low level - P3' } ]; const PostView = () => { return ( <div className="DashboardSla-ContentBody__Form"> <Row> <Col md="10"> <Card className="shadow-sm"> <Card.Body> <Form> <h5 className="text-secondary mb-3">Booking details</h5> <Form.Group controlId="postType"> <Form.Label>Booking priority</Form.Label> <Select id="postType" placeholder="Make a selection" options={priorityOptions} /> </Form.Group> <Button type="submit" variant="primary" >Add Booking</Button> </Form> </Card.Body> </Card> </Col> </Row> </div> ) } export default PostView;