How do you use a variable with FontAwesome unicode as a placeholder in reacstrap 4 Input placeholder

I am currently using a reactstrap 4 Input component and everything looks great when I set the placeholder to a static string (Note: The FontAwesome font is loaded way higher in the app, and as you can see it works fine):

import { Input } from 'reactstrap';

<Input
  style={{ fontFamily: 'FontAwesome, sans-serif' }}
  placeholder="&#xf002;&nbsp;&nbsp;Search by Album Title or ID"
/>

However, I now need to make the placeholder text dynamic and pass it in as a prop. When I do this, everything breaks, and instead of showing the FontAwesome icon, it shows the raw unicode.

<Input
  style={{ fontFamily: 'FontAwesome, sans-serif' }}
  placeholder={props.placeholderText}
/>

AlbumsFilter.defaultProps = {
  placeholderText: "  Search by Album Title or ID"
};

Here is a list of placeholder props I've tried passing, and none of them work:

placeholder={props.placeholderText}
placeholder={String(props.placeholderText)}
placeholder={`${props.placeholderText}`}
placeholder={props.placeholderText.toString()}
placeholder={"  " + props.placeholderText}

Install and use the npm library html-entities:

using:

npm i html-entities

then:

import { decode } from 'html-entities';

and

placeholder={decode(props.placeholderText)}