How should I design with React/Typescript: Server sends list of steps. Each step has a type and payload

I'm looking for some good ideas on software design for this problem:

A server sends an array of Steps:

type StepTypeEnum = 'SECURITY' | 'PERSONAL_DETAILS' | ... ;
type Step = { stepType: StepTypeEnum, payload: ??? };
StepsController.GET(): Array<Step>;

The client receives the array of steps and renders each step using React.

Each step has a different rendering component and payload type. For example:

const Security = ({ username, password }) => <span>...</span>;
const PersonalDetails = ({ firstName, surName }) => <span>...</span>;
// etc...

What's the best way to implement it with typing? The first ideas that comes to mind is the Factory pattern, but I'm not sure how to deal with the facts that payload can be of any type. Should I just type it as any and downcast it in the component?

For example, what I kind of have now:

const Factory = step => ({
  SECURITY: ({payload}) => <Security username={payload.username} password={payload.password} />,
  PERSONAL_DETAILS = ({payload}) => <PersonalDetails firstName={payload.firstName} ... />
}[step.type])

const Component = Factory(step);
<Component payload={payload} />

This forces me to use any to describe the payload type