配列のpushで、DOMの開始タグだけ入れたい

DOMを返す関数を考えています
複数の要素を返すため、

最初にlet res=[]を宣言し
res.push()で要素を追加
return resで返す

という処理をしています

しかし、res.push()する場合は、要素の開始タグと終了タグを両方入れる必要があり、例えば次のような実装ができません

res.push(<ul>
for (item of list)
   res.push(<li>item</li>)
res.push(</ul>

このように実装するためには、どのように記述すればいいでしょうか？

以下に、実際に使っているコードを示します

const createWordList = (dict: string[]) => {
  const res = [];

  let l = 65;
  let _w = 0;
  while (l < 65 + 26 && _w < dict.length) {
    const letter = String.fromCharCode(l);
    let w = _w;
    // insert heading letter
    res.push(<Heading key={l}>{letter}</Heading>);
    console.log(w);
    // ここに<ul>タグを入れたい
    while (w < dict.length && dict[w][0].toUpperCase() == letter) {
      console.log(dict[w]);
      res.push(<li>{dict[w++]}</li>);
    }
    _w = w;
    l++;
  }
  _w = 0;
  while (_w < dict.length) console.log(dict[_w++]);
  return res;
};