React Bootstrap Floating Label Overlaps Input

Question

I'm using React Bootstrap's FloatingLabel element over a form, but my label text is longer than the form width, and breaks to two lines. Text entered in the input field is overlapped by the label. Is there any way to ensure the label doesn't overlap the input text? Picture of label overlapping input.

const Field = ({options, label}) => {

  return(
    <FloatingLabel label={label}  className="mb-3">
      <Form.Select placeholder={label}>
        <option></option>
        options.map((option) =>
          <option key={option.id}>{option.text}</option>
      </Form.Select>
    </FloatingLabel>
  );

}