Generate two or more itens returned by function map in Javascript

I would like to render two itens in a even div, but this is rendered each one in a single div using the method array.map(). My code is:

import React from 'react'
import {useState} from 'react'
function Home() {
const [userName, setUserName] = useState('')
const [userEmail, setUserEmail] = useState('')
const [containerArray, setContainerArray] = useState ([])

function registerUsers () {
    setContainerArray([...containerArray, userName, userEmail])
}

return (
    <div>
        <h1>Register your users and handle them</h1>
        <div id='div1'>
        <div id='div2'>
           <div id='array-div'> {containerArray.map((item)=>{return  <div id='array-div2'><li>{item} 
        </li></div>})}</div>
 </div>)}

export default Home