title: react-select: How do I resolve “Warning: Prop `id` did not match”
body: <p>I have a web app with ReactJs and NextJs. In a functional component, I have used <strong>react-select</strong> then, I'm receiving the following console warning:</p>
  
  <blockquote>
    <p>Warning: Prop <code>id</code> did not match. Server: "react-select-7-input" Client: "react-select-2-input"</p>
  </blockquote>
  
  <p>My codes are following:</p>
  
  <pre><code>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 = () =&gt; {
    return (
      &lt;div className="DashboardSla-ContentBody__Form"&gt;
        &lt;Row&gt;
          &lt;Col md="10"&gt;
            &lt;Card className="shadow-sm"&gt;
              &lt;Card.Body&gt;
                &lt;Form&gt;
                  &lt;h5 className="text-secondary mb-3"&gt;Booking details&lt;/h5&gt;
                  &lt;Form.Group controlId="postType"&gt;
                    &lt;Form.Label&gt;Booking priority&lt;/Form.Label&gt;
                    &lt;Select 
                      id="postType"
                      placeholder="Make a selection"
                      options={priorityOptions}
                    /&gt;
                  &lt;/Form.Group&gt;
                  &lt;Button
                    type="submit"
                    variant="primary"
                  &gt;Add Booking&lt;/Button&gt;
                &lt;/Form&gt;
              &lt;/Card.Body&gt;
            &lt;/Card&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/div&gt;
    )
  }
  
  export default PostView;
  </code></pre>