fix: market selector non unique key issue

package.json

@@ -26,6 +26,7 @@
     "bn.js": "^5.1.3",
     "craco-less": "^1.17.0",
     "immutable-tuple": "^0.4.10",
+    "nanoid": "^3.1.22",
     "qrcode.react": "^1.0.0",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.5",

src/pages/TradePage.tsx

@@ -24,6 +24,7 @@ import {
 import CustomMarketDialog from '../components/CustomMarketDialog';
 import { notify } from '../utils/notifications';
 import { useHistory, useParams } from 'react-router-dom';
+import { nanoid } from 'nanoid';
 
 const { Option, OptGroup } = Select;
 
@@ -250,7 +251,7 @@ function MarketSelector({
           {customMarkets.map(({ address, name }, i) => (
             <Option
               value={address}
-              key={address}
+              key={nanoid()}
               name={name}
               style={{
                 padding: '10px',
@@ -296,7 +297,7 @@ function MarketSelector({
           .map(({ address, name, deprecated }, i) => (
             <Option
               value={address.toBase58()}
-              key={address}
+              key={nanoid()}
               name={name}
               style={{
                 padding: '10px',

yarn.lock

@@ -8177,6 +8177,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
+nanoid@^3.1.22:
+  version "3.1.22"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"
+  integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"