How can I render a column header that contains a string & an imported component?

[lilfrootyloops]

Is it possible to render a column header that contains a string & an imported component to resemble something like the following image:

I've got an arrow sort icon that I've imported that I'd like to include in some headers beside a string value (e.g., Location, First Name, Last Name, etc.) to indicate that the columns are sortable. The following code is how I've tried to build one such header:

{
    Header: `Location ${<ArrowSort />}`,
    accessor: 'location',
    disableFilters: true
}

Rather than the desired output, I'm seeing "Location [object Object] as the column's header. I'd really appreciate it if someone could explain what I'm doing wrong and point me in the right direction to produce the desired header.

[lilfrootyloops]

I was able to resolve my issue by rewriting my Header parameter as the following:

Header: () => (
  <div className="flex">
    <div className="inline-flex">Location</div>
    <div className="inline-flex">
      <ArrowSort />
    </div>
  </div>
),