How to pass dynamic props to dynamic component in ReactJS Typescript?

Let’s say I have a home page which received array of data as props from nextjs getServierSideProps. And I have a object of component like that

const pages = {
  0: Welcome,
  1: SimType,
  2: NumberSearch,
  3: ShoppingCart,
  4: PersonalInformation,
  5: ShippingAddress,
  6: OrderConfirmation,
}

In home page I’m rendering component from pages based on currentStep(which is a number between 0 to 7). And passing props to rendered component also based on currentStep. Here is my home page demo:

const pages = {
  0: Welcome,
  1: SimType,
  2: NumberSearch,
  3: ShoppingCart,
  4: PersonalInformation,
  5: ShippingAddress,
  6: OrderConfirmation,
}

export default function Home({homeData}: {homeData: any}) {

  // currentStep will be a number from 0 to 6
  const currentStep = useSelector(selectStep)

  // Select component based on currentStep to render
  const Component = pages[currentStep as keyof typeof pages]

  return (
    <div className='mx-auto h-screen max-w-lg'>
      <Component
        // handleStepClick={handleStepClick}
        data={homeData[currentStep]}
      />
    </div>
  )
}

export const getServerSideProps = wrapper.getServerSideProps(
  (store) => async (context) => {
    try {
      const [homeData] = await Promise.all([getHomeData()])

      return {
        props: {
          homeData,
        },
      }
    } catch (error) {
      console.log('===Error from index.js page===', error)
    }
  }
)

And in the component listed above (Welcome, Simtype e.t.c), I define the props type according to their use case. As an example I define props type for Welcome component like that –

type Props = {
  data: {
    title: string
    subtitle: string
    sim_image: string
    packages: string[]
  }
  handleStepClick: (direction: 'next' | 'prev') => void
}

The problem is: when I hover over the data props in vscode, it shows the type of data is intersection of my Component List.

enter image description here

But I except union rather than intersection. How can I fix that so that type of data will be like that

<Component
    data = WelcomePropsType | SimTypePropsType | NumberSearchPropsType | AndSoOn
/>