react 方法内返回dom的方法

我有一段写星星等级的代码，后台返回的是一个数字，我要根据数字说明我有几个星，一开始这么写的

   <ul className='star-list'>
                        {(() => {
                          let dom=''
                          if (item.startLevel) {
                            for (let i = 0; i < item.startLevel; i++) {
                              dom+=(<li className='star-item' key={i}></li>)
                            }
                          }
                          return dom
                        })()}
                      </ul>

但这样的写法会变成返回一个[object,object],[object,object],[object,object],[object,object]....的字符串，正确的写法是：

        <ul className='star-list'>
                        {(() => {
                          let dom=[]
                          if (item.startLevel) {
                            for (let i = 0; i < item.startLevel; i++) {
                              dom.push(<li className='star-item' key={i}></li>)
                            }
                          }
                          return dom
                        })()}
                      </ul>

通过返回一个数组的方式他会自动解析成我们需要的dom标签列表，问题解决，但是原因的话可能不是很清楚， 有明白的大佬欢迎留言解答，谢谢