我正在使用React显示客户信息，目前我已经硬编码了表头和表单元格的值。

我有一个类似于ClientAddress =[{地址行1Desc：“苹果公园路1号”，地址第2行说明：null，....}]。我希望前两项在一行中，接下来的两项在第二行中，依此类推...
我就像这样

<Card sx={{ minWidth: 275 }}>
            <CardContent>
              <Typography variant="h5" component="div" className="cardTitle">
                <MailOutlineIcon />&nbsp;Primary Address

              </Typography>
              
              <TableContainer component={Paper} sx={{ width: 400, margin: 'auto', display: 'Block', boxShadow: 'none' }}>
                <Table sx={{ minWidth: 400 }} aria-label="customized table">
                  <TableBody>
                    
                    <TableRow className='tableRow'>
                    
                      <TableCell component="th" scope="row" className="tableCell">
                        <span className="cellHeader">Address Line1</span><br />{clientAddressDetails.length ? <span className='cellValue'>{clientAddressDetails[0].addressLine1Desc}</span> : <span className='cellValue'>&nbsp;&nbsp;</span>}
                      </TableCell>
                      <TableCell component="th" scope="row" className="tableCell">
                        <span className="cellHeader">Address Line2</span><br />{clientAddressDetails.length ? <span className='cellValue'>{clientAddressDetails[0].addressLine2Desc}</span> : <span className='cellValue'>&nbsp;&nbsp;</span>}
                      </TableCell>
                    </TableRow>
                    <TableRow className='tableRow'>
                      <TableCell component="th" scope="row" className="tableCell">
                        <span className="cellHeader">Address Line3</span><br />{clientAddressDetails.length ? <span className='cellValue'>{clientAddressDetails[0].addressLine3Desc}</span> : <span className='cellValue'>&nbsp;&nbsp;</span>}
                      </TableCell>
                      <TableCell component="th" scope="row" className="tableCell">
                        <span className="cellHeader">Address Line4</span><br />{clientAddressDetails.length ? <span className='cellValue'>{clientAddressDetails[0].addressLine4Desc}</span> : <span className='cellValue'>&nbsp;&nbsp;</span>}
                      </TableCell>
                    </TableRow>

                    <TableRow className='tableRow'>
                      <TableCell component="th" scope="row" className="tableCell">
                        <span className="cellHeader">Country Code</span><br />{clientAddressDetails.length ? <span className='cellValue'>{clientAddressDetails[0].countryCode}</span> : <span className='cellValue'>&nbsp;&nbsp;</span>}
                      </TableCell>
                      <TableCell component="th" scope="row" className="tableCell">
                        <span className="cellHeader">Country Name</span><br />{clientAddressDetails.length ? <span className='cellValue'>{clientAddressDetails[0].countryCode}</span> : <span className='cellValue'>&nbsp;&nbsp;</span>}
                      </TableCell>
                    </TableRow>
                    <TableRow className='tableRow'>
                      <TableCell component="th" scope="row" className="tableCell">
                        <span className="cellHeader">CityName</span><br />{clientAddressDetails.length ? <span className='cellValue'>{clientAddressDetails[0].cityName}</span> : <span className='cellValue'>&nbsp;&nbsp;</span>}
                      </TableCell>
                      <TableCell component="th" scope="row" className="tableCell">
                        <span className="cellHeader">PostalCode</span><br />{clientAddressDetails.length ? <span className='cellValue'>{clientAddressDetails[0].postalCode}</span> : <span className='cellValue'>&nbsp;&nbsp;</span>}
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>
            </CardContent>
          </Card>

我想动态地显示像上面的图像，而不是重复的代码。我需要这样做来显示其他信息在这种格式