Reusable React checkbox component with image without ID

I'm trying to make a reusable React component for a checkbox.

Now, I know what a standard image-replacement for a checkbox looks like, so here it is in my React project:

import React, { Component } from 'react';

class Checkbox extends Component {
  render() {
    return (
      <div className="checkbox">
        <input type="checkbox" name="thing" value="valuable" id="thing"/><label for="thing"></label> {this.props.text}
      </div>
    );
  }
}

export default Checkbox;

And here's the general CSS:

input[type=checkbox] {
  display:none;
}

input[type=checkbox] + label {
  background: url("checked.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0;
}
input[type=checkbox]:checked + label {
  background: url("unchecked.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0;
}

Now, because this is React, I want to be able to reuse this component. But, I can't reuse an ID. What should I do to make a checkbox with an image replacing the native checkbox? Is there a way to do this without this "label" method? I'd prefer to not use a random number as the ID, or something along those lines.