Javascript - 刷新页面后才弹出下拉菜单时出错

我试图用一组数组来填充一个下拉菜单colors 。当我第一次加载它时，下拉菜单被填充，并且工作。当我刷新页面时，我得到一个错误。

我的App.js看起来像这样。

import './App.css';
import React, { useState } from "react";


function App() {

  var color = ["green","blue"]; 

  var option = "";

  for (var i = 0; i < color.length; i ++)
  {
    option += '<option value="'+ color[i] + '">' + color[i] + "</option>"
  }

  document.getElementById('color').innerHTML = option

  const handleChange = event => {
    console.log(event.target.value);

  };  

  return (
    <div className="App">
      <div class="form-group">

        <select onChange={handleChange}  class ="form-control" name="" id="color">

        </select>
      </div>
      
    </div> 
  );
}

export default App;

当我刷新时，我得到的错误是。

    App.js:23 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
        at App (App.js:23:1)
        at renderWithHooks (react-dom.development.js:16305:1)
        at mountIndeterminateComponent (react-dom.development.js:20074:1)
        at beginWork (react-dom.development.js:21587:1)
        at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
        at invokeGuardedCallback (react-dom.development.js:4277:1)
        at beginWork$1 (react-dom.development.js:27451:1)
        at performUnitOfWork (react-dom.development.js:26557:1)
        at workLoopSync (react-dom.development.js:26466:1)


react-dom.development.js:18687 The above error occurred in the <App> component:

    at App (http://localhost:3000/static/js/bundle.js:44:46)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

我对JavaScript非常陌生，但我的想法是，也许它需要先清除元素或什么？不确定，因为我只是按照一个教程，我从来没有看到任何添加...