我已经在code sandbox中尝试过了，果然，它渲染了两次。这是因为，在index.js文件中，它使用了React.StrictMode。
根据documentation：
严格模式不能自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。这是通过故意双重调用以下函数来实现的：

• 类组件构造函数、render和shouldComponentUpdate方法
• 传递给useState、useMemo或useReducer的函数

这通常是为了帮助仅在开发环境中发现副作用。它不适用于生产环境。
因此，如果您不希望它渲染两次，只需删除index.js文件中的<React.StrictMode> </ React.StrictMode>，它就会正常工作。
希望有帮助：）

这是因为您的应用程序被 Package 在React.StrictMode下。

<React.StrictMode>
<First />
</React.StrictMode>

React 16.* 中为函数组件引入了严格模式。我们将组件 Package 在React.StrictMode下，以识别应用程序中的潜在错误。
StrictMode有助于维护大型代码库的稳定性，并有助于升级到新版本的React。StrictMode在控制台中记录我们的应用程序可能存在的问题的错误：
React.StrictMode需要触发一些方法和生命周期钩子两次来解决这些问题：

• 这些方法可能会被多次调用，并且可能会产生副作用，因此React.StrictMode会触发这些方法两次以检查任何副作用。如果有任何副作用，将记录错误。（副作用：在方法/组件之外更新的内容）
• 构造器
• componentWillMount（或UNSAFE_componentWillMount）
• componentWillReceiveProps（或UNSAFE_componentWillReceiveProps）
• componentWillUpdate（或UNSAFE_componentWillUpdate）
• getDerivedStateFromProps
• shouldComponentUpdate
• 渲染
• setState更新器函数（第一个参数）
• 有可能我们正在使用一些旧的React方法和API，所以React.StrictMode会识别出这一点，并将错误记录到控制台，指出该方法已经过时。
• React.StrictMode仅在开发模式下工作，因此无需担心生产模式。
  **结论：**React.StrictMode是由React社区提供的，帮助我们的应用程序跟踪更改，我们可以轻松地将应用程序升级到新版本。