如何在React中有两个同步的嵌套循环？

import React from 'react';

function App() {
  const outerArray = [1, 2, 3];
  const innerArray = ['A', 'B', 'C'];

  return (
    <div>
      {outerArray.map((outerItem) => (
        <div key={outerItem}>
          {innerArray.map((innerItem) => (
            <span key={innerItem}>
              {outerItem}-{innerItem}
            </span>
          ))}
        </div>
      ))}
    </div>
  );
}

export default App;

1-A 1-B 1-C
2-A 2-B 2-C
3-A 3-B 3-C