Is there a recommended pattern to follow for conditional formatting in React?

I was currently in the process of developing a React component library. Depending on the variant specified by the user, different props are available for customization.

Presently, we utilize if conditions to determine the variant provided by the user and render the component accordingly.

I'm seeking advice and recommendations regarding a more effective approach. Specifically, one that accommodates varying props for different variants and allows us to render the component accordingly without the need for extensive if conditions.

Presently we are following the below approach

if(variant === 'A' || variant === 'B'){
  const {A, B, C, D, E} = props
  //Code block
  return (<ComponentA/>)
} 

if(variant ==='C' || variant === 'D' ){
  const {F, G} = props
  // Code block
  return (<ComponentA/>)
}