Javascript design pattern for rendering a component in function of its data type

I have implemented a chat bubble that can render Images, GIFs, audios, and text.

Currently, what I am doing is the following:

const Bubble = memo(
  (props) => {
      const { colors } = useTheme();

      const { content, date, mine, onLongPress } = props;

      const renderText = () => (/* JSX FOR TEXT */);

      const renderGIF = () => (/* JSX FOR GIF */);

      const renderAudio = () => (/* JSX FOR AUDIO */);

      const renderImage = () => (/* JSX FOT IMAGE */);

      return (
           <...>
               {content.type === VALID_CHAT_MESSAGES_TYPES[0]
                    ? renderText()
                    : content.type === VALID_CHAT_MESSAGES_TYPES[1]
                    ? renderAudio()
                    : content.type === VALID_CHAT_MESSAGES_TYPES[2]
                    ? renderImage()
                    : renderGIF()}  
           </...>
      )
});

I want to refactor this component but I am not sure about which pattern should I apply... Any ideas?