Fix payer bank accounts combobox.

src/Form.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import './App.css';
+import './Form.css';
 
 function App() {
   const [payerName, setPayerName] = useState('');
@@ -9,6 +9,7 @@ function App() {
   const [clientId, setClientId] = useState('');
   const [payerBankAccount, setPayerBankAccount] = useState('');
   const [amount, setAmount] = useState('0-00');
+  const [payerAccounts, setPayerAccounts] = useState([]);
 
   const handleBlur = () => {
     console.log(amount);
@@ -37,7 +38,6 @@ function App() {
           action: 'getClientInfo',
         }),
       });
-
       const data = await response.json();
       setPayerName(data.fields[3].value);
       setPayerINN(data.fields[4].value);
@@ -45,6 +45,7 @@ function App() {
       setPayerAddress(data.fields[7].value);
       setClientId(data.fields[1].value);
       setPayerBankAccount(data.fields[12].value);
+      setPayerAccounts(data.accounts);
     };
 
     fetchUsingAsyncAwaitWithFetchApi();
@@ -73,7 +74,13 @@ function App() {
               onChange={(e) => setPayerBankAccount(e.target.value)}
               onBlur={handleBlur}
             >
-              <option id="1">{payerBankAccount}</option>
+              {payerAccounts.map((item, ind) => (
+                <option key={`cbAccountNumber_${ind}`}>
+                  {item.description
+                    ? `${item.cbAccountNumber}|${item.description}`
+                    : item.cbAccountNumber}
+                </option>
+              ))}
             </select>
           </div>
           <div className="child">ИНН:</div>

src/main.jsx

@@ -1,9 +1,4 @@
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App.jsx';
+import Form from './Form.jsx';
 
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+createRoot(document.getElementById('root')).render(<Form />);