funcao require() recebe como argumento string , mas não permite uma string variável?

A partir do exemplo dado react native aula 2, tentei de varias maneiras carregar uma imagem para cada usuário, conforme comentado abaixo. As perguntas estão nos comentários no código, abaixo.

const DATA = [
  {
    title: "Usuario 1",
    data: ["C:/Users/claud/pj_reactnative/pj01/instalure/res/img/callEndBlackBground.png"]
  },
  {
    title: "Usuario 2",
    data: ["C:/Users/claud/pj_reactnative/pj01/instalure/res/img/VidyoIcon.png"]
  },
  {
    title: "Usuario 3",
    data: ["C:/Users/claud/pj_reactnative/pj01/instalure/res/img/VidyoIcon.png"]
  },
  {
    title: "Usuario 4",
    data: ["C:/Users/claud/pj_reactnative/pj01/instalure/res/img/VidyoIcon.png"]
  }
];

const largura = Dimensions.get("screen").width;

const Item = ({ title }) => (
  <Image
      /* desta maneira funciona. Mas qual a utilidade de usar uma mesma imagem para os diferentes nomes? */
      source={require("C:/Users/claud/pj_reactnative/pj01/instalure/res/img/callEndBlackBground.png")}

      /* nao funciona da maneira abaixo. Por que não? Afinal 'require' não recebe como argumento uma string? */
      /* source={require(title)}  */

      style={estilo.imagem}
  />
  /* <Text>{title}</Text> */
);

const App = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Item title={item} />}
      renderSectionHeader={({ section: { title } }) => (
        <Text>{title}</Text>
      )}
    />
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
    marginHorizontal: 16
  },
  item: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8
  },
  header: {
    fontSize: 32,
    backgroundColor: "#fff"
  },
  title: {
    fontSize: 24
  }
});

const estilo = StyleSheet.create({
  imagem:{
      width: largura,
      height: largura
  }
});

export default App;