Select element with width: fit-content doesn't get enough width and the text ends up over the dropdown arrow icon

Question

Long story short, I'm using react-bootstrap v2 and Bootstrap v5 and I'm giving my Select element width: fit-content like this:

    <Form.Select
        value={selected || ''}
        onChange={(ev: ChangeEvent<HTMLSelectElement>) => {
            console.log(ev.target.value);
            onSelect(ev.target.value);
        }}
        style={{ width: 'fit-content', paddingRight: 20, ...rest.style }}
    >

But for whatever reason, the selected option goes over the dropdown icon and I don't understand why considering I'm using width: fit-content. Before my upgrade from react-bootstrap v1 and Bootstrap v4 the text was looking good.

Before:

After:

I know the text is bigger and bolder, but shouldn't that be handled by width: 'fit-content'?

select {
  width: fit-content;
  padding-right: 20px;
}

.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-image: url(data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M2 5l6 6 6-6%27/%3e%3c/svg%3e);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

select {
  word-wrap: normal;
}

button,
select {
  text-transform: none;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

<select class="form-select" style="width: fit-content;padding-right: 20px;"></select>