基于下拉值的 React-google-map 标记图标未显示正确的图标

Question

我正在做一个项目，工人主管可以在 map 上放置一个标记，那里有垃圾，收集器工人可以将标记从红色切换到绿色，以便收集。

我将我的标记存储在 mongoDB 中。

一切都已设置并正常工作，但是在创建了一个下拉菜单后，它的 state 是全局 state，我不知道如何根据该值更改标记图标。 此 function 将使用所选图标类型将标记放置在 map.onclick 处。

使用此选定的图标类型并删除标记后，我想将此标记图标值存储在 mongoDB 中，并在刷新页面时呈现正确的标记。

最终的 function 将是位于 marker.onclick 的弹出窗口 window，其中我需要 3 个按钮：红色、绿色和删除。 这些按钮可以更正 MongoDB 中的数据并相应地渲染图标。

我的下拉列表和全局 state：

    import React, { useState, memo, createContext, useContext } from "react";


export default function Header() {
  return (
    <ColourProvider>
      <HomeContent />
    </ColourProvider>
  );
  
}

const HomeContent = memo(() => {
  return (
    <div>
      <ColourPicker />
      <ColourDetails />
    </div>
  );
});

export const ColourContext = createContext();

function ColourProvider({ children }) {
  const [colour, setColour] = useState("red");
  
  return (
    <ColourContext.Provider value={{ colour, setColour }}>
      {children}
    </ColourContext.Provider>
  );
}

function ColourPicker() {
  const { colour, setColour } = useContext(ColourContext);

  return (
    <select value={colour} 
    onChange={(event) => {
      setColour(event.target.value);
      }}
      >
      <option value="green">Done</option>
      <option value="red">Needs to get done</option>
    </select>
  )
}


function ColourDetails()  {
  const { colour } = useContext(ColourContext);
  
  return (
  <h1>{colour}</h1>
  );
}

我的 index.js 带有标记元素：

<Marker
              key={sighting.id}
              position={{ lat: sighting.latitude, lng: sighting.longitude }}
              //type={value}
              onClick={() => setSelected(sighting)}
              icon={{
                url: `/red.svg`,
                origin: new window.google.maps.Point(0, 0),
                anchor: new window.google.maps.Point(15, 15),
                scaledSize: new window.google.maps.Size(30, 30),
              }}
            />

我试过 url: {ColourContext} 但它只显示默认标记。

如何将“/red.svg”作为下拉列表中的值传递以获得有效的解决方案？

Svgs 位于 /public 文件夹中。

提前致谢，

帕特里克