React - Design Pattern or things to have in mind when rendering an UI based on what i fetch

I have a React app, that i now want to render differently based on what mode the app is run in. Let's say the app has 3 modes, Mode A, mode B and mode C. The app was designed to run with only 1 mode in mind and i now want to add the other 2 modes.

The app fetches data from the back-end and then renders the UI, and now, based on what mode its in, it will fetch different data from the back-end. The data it fetches will be slightly similar, but will still be in a slightly different format, so it's not like i am fetching Kittens or Puppies and then just rendering an attribute called name. Based on what mode the app is in, it will need to render more or less components. For example, if its in mode B, it will need to render a dropdown next to a profile picture, if its in mode C, it will need to render only the profile picture.

• Are there any design patterns or ideas that i should look at before i attempt to do this major refactor/feature ?
• Is this issue perhaps too case-specific and there is no general rule when it comes to a thing like this?

Also as a side note, if this is not the right stack exchange for this question, please let me know in the comments and i will remove it. I did search for 'design-pattern' type questions before i posted this, and they seem to exist and get a positive response. Thank you!