title: React Bootstrap custom checkbox without id?
body: <p>I'm having a hard time understanding why this simple Bootstrap <a href="https://react-bootstrap.netlify.app/components/forms/#forms-custom-checkboxes-and-radios" rel="nofollow noreferrer">custom checkbox</a> doesn't work. I'm using React, Bootstrap, and React-Boostrap.</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { Button, Form, FormCheck } from "react-bootstrap";
  import "bootstrap/dist/css/bootstrap.min.css";
  
  function App() {
    return (
      &lt;div className="p-3"&gt;
        &lt;FormCheck custom label="Checkbox"&gt;
        &lt;/FormCheck&gt;
      &lt;/div&gt;
    );
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/react-mcbsvc" rel="nofollow noreferrer">Online Example</a></p>
  
  <p>Adding <code>id="test"</code> to <code>FormCheck</code> seems to cause the checkbox to work, but is is possible to not have to use <code>id</code>? (The checkbox is used within the component of an object in my actual code, and it would be unnecessarily complicated to come up with a unique id for every checkbox)</p>