How to create a clean function to render various images based on a prop with React and TypeScript

In my React and Typescript project I have to render some images (a small, medium or large) but based on e.g. a variant prop I have to render the relevant image.

I created a mapping for simplicity for the images data (or do I have to structure it differently?):

const ImageMapping = {
    exampleTypeOne: {
      ImageSmall: ImageSmallTypeOne,
      ImageMedium: ImageMediumTypeOne,
      ImageLarge: ImageLargeTypeOne,
    },
    exampleTypeTwo: {
      ImageSmall: ImageSmallTypeTwo,
      ImageMedium: ImageMediumTypeTwo,
      ImageLarge: ImageLargeTypeTwo,
    },
  };


return (

      <picture>
        <source media={`(max-width: ${breakPoints.xs}px)`} srcSet={ImageSmall} />
        <source media={`(max-width: ${breakPoints.md}px)`} srcSet={ImageMedium} />
        <img
          src={ImageLarge}
          alt="My alt"
          width="480"
          height="400"
        />
      </picture>
)

How do I create a clean and simple function to render the various images based on e.g. a variant prop like:

export type Props = {
  variant: 'typeOne' | 'typeTwo';
};