Reactjs 如何使用2个相同的值处理物料界面的选择

我正在尝试实现一个功能，用户可以输入他的电话号码和国家代码。 我正在使用材质ui的选择组件进行国家代码的下拉列表，以便用户可以从下拉菜单中选择他的国家代码。 问题是美国和加拿大有相同的国家代码，即+1。我还使用npm包显示相应的国旗。 这是我的密码：-

            const checkCountryFlag = (code) => {
              switch (code) {
                 case "+91":
                    return "inr";
                 case "+1":
                    return "usd";
                 case "+44":
                    return "gbp";
                 case "+971":
                     return "aed";
                  case "+1-c":
                     return "cad";
                 }
               };

                <Select
                    value={countryCode}
                    label="Country code"
                    onChange={(e) => setCountryCode(e.target.value)}
                    renderValue={() => (
                      <div style={{ padding: "10px" }}>
                        <div
                          class={`currency-flag currency-flag-${checkCountryFlag(
                            countryCode
                          )}`}
                          style={{ paddingRight: "5px" }}
                        ></div>
                        <span style={{ paddingLeft: "20px" }}>{countryCode}</span>
                      </div>
                    )}
                  >
                    <MenuItem value={`+91`}>
                      <div class={`currency-flag currency-flag-inr`}></div>
                      +91
                    </MenuItem>
                    <MenuItem value={`+1`}>
                      <div class={`currency-flag currency-flag-usd`}></div>
                      +1
                    </MenuItem>
                    <MenuItem value={`+44`}>
                      <div class={`currency-flag currency-flag-gbp`}></div>
                      +44
                    </MenuItem>
                    <MenuItem value={`+971`}>
                      <div class={`currency-flag currency-flag-aed`}></div>
                      +971
                    </MenuItem>
                    <MenuItem value={`+1`}>
                      <div class={`currency-flag currency-flag-cad`}></div>
                      +1
                    </MenuItem>
                  </Select>

在这种情况下…当我选择加拿大…那么我无法再次选择美国

---

任何关于如何实现此目标的建议

可能的解决方案之一是，不要将国家代码设置为值，只设置国家名称

选择后，从所选国家提取国家代码

比如说

如果用户选择加拿大。您只需在州中设置加拿大，并从find函数中获取加拿大的国家代码

[{name: "Canada", code: "+1"}, {name: "USA", code: "+1"}].find(c => c.name === selectedCountryName).code

---

可能的解决方案之一是，不要将国家代码设置为值，只设置国家名称

选择后，从所选国家提取国家代码

比如说

如果用户选择加拿大。您只需在州中设置加拿大，并从find函数中获取加拿大的国家代码

[{name: "Canada", code: "+1"}, {name: "USA", code: "+1"}].find(c => c.name === selectedCountryName).code