iterating on react components

i wanted to iterate on the list of components as you can there is lot of redundancy so for example i have long list of routes just as given below

          <Route
            exact
            path={Routes.HOME}
            render={() => (
              <LandingPage
                setValue={setValue}
                setSelectedIndex={setSelectedIndex}
              />
            )}
          />
          <Route
            exact
            path={Routes.SERVICES}
            render={() => (
              <ServicesPage
                setValue={setValue}
                setSelectedIndex={setSelectedIndex}
              />
            )}
          />
          <Route
            exact
            path={Routes.MOBILE_APPS}
            render={() => (
              <MobileAppsPage
                setValue={setValue}
                setSelectedIndex={setSelectedIndex}
              />
            )}
          />

i would create a list like below

const list = [
{path: Routes.HOME, component: LandingPage},
{path: Routes.SERVICES, component: ServicesPage},
{path: Routes.MOBILE_APPS, component: MobileAppsPage}];

and i want to achieve below

list.map((obj) => (
          <Route
            exact
            path={obj.path}
            render={() => (
              <obj.component
                setValue={setValue}
                setSelectedIndex={setSelectedIndex}
              />
            )}
          />
))