函数不会在React中渲染元素

我是React的新手，请多多包涵。这是我的代码：

import * as React from "react";
import { render } from "react-dom";

import "./styles.css";

function App() {
  var state = {
    people:
      [
        {
          id: 1,
          name: "Jhon",
        },
        {
          id: 2,
          name: "Ben",
        }
      ]
  }
  var get_names = () =>
  {
    state.people.map(people => {
      return <p>{people.name}</p>
    })
  }
  return (
    <div className="App">
     {
      get_names()
     }
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

由于某种原因，它不会生成任何元素。但是，如果我不使用这样的函数，则代码可以工作：

return (
    <div className="App">
     {
        state.people.map(people => {
          return <p>{people.name}</p>
        })
     }
    </div>
  );

我尝试了这种方法：

 return (
    <div className="App">
     {
      this.get_names()
     }
    </div>
  );

但这给我的是不确定的。

然后我尝试了这个：

 return (
    <div className="App">
     {
      () => this.get_names()
     }
    </div>
  );

但是再一次，什么也没有呈现。这可能是菜鸟的错误，但是有人可以告诉我这是怎么回事吗？

这是一个现场演示：https : //codesandbox.io/s/404mjv65rx