A few things here:

1. You need to tell typescript what props to expect for the functionalComp. You do this by passing the props type to React.FC like React.FC<PropsTypeHere>. That makes your props definition look like this:

export interface DemoFCProps {
  itemArray: FCProps[],
  functionalComp: React.FC<FCProps>
}

2. You should let react render this for your, rather than calling the function component directly. That makes using <MyComponent {...props} /> syntax.

export default function DisplayFCs(props : DemoFCProps) {
  const FunctionalComp = props.functionalComp
  return (
    <div>
      {
        props.itemArray.map(
          (item) => <FunctionalComp {...item} />
        )
      }
    </div>
  )
}

Playground

But this isn't all the way to your goal:

The hope was that this would allow me to call the DisplayFCs component with any component and array of props.

To do that, DisplayFCs needs to be generic. Let's start with it's props.

export interface DisplayFCsProps<
  FCProps extends { [key: string]: unknown }
> {
  itemArray: FCProps[],
  functionalComp: React.FC<FCProps>
}

Here FCProps is a generic type parameter. Whatever that type is, this constructs a type where it requires an array of that type, and a functional component that takes that type as props.

Then you need to use that props type from a generic functional component:

export default function DisplayFCs<
  Props extends { [key: string]: unknown }
>(props: DisplayFCsProps<Props>) {
  const FunctionalComp = props.functionalComp
  return (
    <div>
      {
        props.itemArray.map(
          (item) => <FunctionalComp {...item} />
        )
      }
    </div>
  )
}

Which now works as you would expect

function Person(props: { name: string, age: number }) {
  return <></>
}
const testPersons = <DisplayFCs
  functionalComp={Person}
  itemArray={[
    { name: 'Sue', age: 30 },
    { name: 'joe', age: 24 }
  ]}
/>


function Book(props: { title: string, author: string }) {
  return <></>
}
const testBooks = <DisplayFCs
  functionalComp={Book}
  itemArray={[
    { title: 'Necronomicon', author: 'Sue' },
    { title: 'The Expanse', author: 'Joe' }
  ]}
/>

Playground

Yes. You pass the props inside the function component directly (using props) like this:

function myFunc(props){
  console.log(props.content);
  return <div>{props.content}</div>;
}

assuming that the props that passes in has element content.

To clarify, there is no this in function components because they're not classes at all! Instead, you pass in props directly into the function.

In fact, it is probably the one of the first things that you learn in React. So if you're new, then I suggest the tutorial here.

You would need to pass down each prop individually for each function that you needed to call

<CreateProfile
  onFirstNameChange={this.firstNameChange} 
  onHide={close}
  show={this.state.showModal}
/>

and then in the CreateProfile component you can either do

const CreateProfile = ({onFirstNameChange, onHide, show }) => {...}

with destructuring it will assign the matching property names/values to the passed in variables. The names just have to match with the properties

or just do

const CreateProfile = (props) => {...}

and in each place call props.onHide or whatever prop you are trying to access.