fix(components): token input items

packages/components/src/TokenInput/TokenInput.tsx

@@ -1,6 +1,6 @@
 import { useDOMRef } from '@interlay/hooks';
 import { mergeProps, useId } from '@react-aria/utils';
-import { ChangeEvent, FocusEvent, forwardRef, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, FocusEvent, forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { trimDecimals } from '../utils';
 
@@ -35,10 +35,25 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>((props, ref): J
   const inputRef = useDOMRef<HTMLInputElement>(ref);
 
   const [value, setValue] = useState(defaultValue);
-  const [currency, setCurrency] = useState<any | undefined>(getDefaultCurrency(props));
+
+  const defaultCurrency = useMemo(() => getDefaultCurrency(props), []);
+  const [currency, setCurrency] = useState<any | undefined>(defaultCurrency);
 
   const inputId = useId();
 
+  useEffect(
+    () => {
+      if (props.type === 'selectable') {
+        setCurrency(
+          (props.items || []).find(
+            (item) => item.currency.symbol === (props.selectProps?.value || props.selectProps?.defaultValue)
+          )?.currency
+        );
+      }
+    },
+    props.type === 'selectable' ? [props.items] : []
+  );
+
   useEffect(() => {
     if (valueProp === undefined) return;