<Form.Group
    isInvalid
    controlId="explicit-id-1"
  >
    <Form.Label>What kind of cats?</Form.Label>
    <Form.Control />
    <Form.Control.Feedback type="invalid">You are incorrect!</Form.Control.Feedback>
  </Form.Group>

  <Form.Group
    isValid
    controlId="explicit-id-2"
  >
    <Form.Label>What kind of cats?</Form.Label>
    <Form.Control />
    <Form.Control.Feedback type="valid">You are correct!</Form.Control.Feedback>
  </Form.Group>

() => {
  const [value, setValue] = useState('');
  const handleChange = (e) => setValue(e.target.value);
  return (
    <>
      <Form.Group size="sm">
        <Form.Label>What kind of cats?</Form.Label>
        <Form.Control
          value={value}
          onChange={handleChange}
        />
      </Form.Group>

      <Form.Group>
        <Form.Label>What kind of cats?</Form.Label>
        <Form.Control
          value={value}
          onChange={handleChange}
        />
      </Form.Group>

      <Form.Group size="lg">
        <Form.Label>What kind of cats?</Form.Label>
        <Form.Control
          value={value}
          onChange={handleChange}
        />
      </Form.Group>
    </>
  );
}