"{'}'}"还是"&rbrace "在尝试渲染时出错的解决方法

这里是我试图在向html渲染内容时传递的地图函数，但我在第3行的条件运算符中得到了, expected 错误。另外，在闭合括号中我得到了Unexpected token. Did you mean {'}'}or}，为什么会这样？是由于语法问题吗？

 {newMessages.map(function (item) {
                         return (
                          { userId === item.event.sender ?
                            <div class="flex justify-start mb-4">
                              <div
                                class="ml-2 py-3 px-4 bg-blue-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white"
                              >
                                {item.event.content.body}
                              </div>
                              <img
                                src="https://source.unsplash.com/vpOeXr5wmR4/600x600"
                                class="object-cover h-8 w-8 rounded-full"
                                alt=""
                              />
                            </div>
                            :
                            <div class="flex justify-end mb-4">
                              <img
                                src="https://source.unsplash.com/vpOeXr5wmR4/600x600"
                                class="object-cover h-8 w-8 rounded-full"
                                alt=""
                              />
                              <div
                                class="ml-2 py-3 px-4 bg-gray-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white"
                              >
                                {item.event.content.body}
                              </div>
                            </div>}                     
                            )
                      }
                    )
                    }