export const MyComponent = <
  T extends { id?: string; iterator: string }
>({
  data,
   iterator
}: Props<T>) => (
  <div>
      {data?.map((i: T) => (
        <MySecondComp key={i.id}  text={i[iterator]} />
      ))}
  </div>
)

but it's complaining on the i[iterator] part with the title of this question

how do I solve this? essentially I'm mapping over data and have made it reusable and you can pass in an iterator and the data is unknown