React Bootstrap custom checkbox without id?

I'm having a hard time understanding why this simple Bootstrap custom checkbox doesn't work. I'm using React, Bootstrap, and React-Boostrap.

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 (
    <div className="p-3">
      <FormCheck custom label="Checkbox">
      </FormCheck>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Online Example

Adding id="test" to FormCheck seems to cause the checkbox to work, but is is possible to not have to use id? (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)