反应解析失败,令牌异常

我正在尝试创建一个动态材质UI Flex框,该框基于backend生成一个新行。我的想法是关闭当前的外部Box并基于标志创建一个新的Box

所以我写下面的代码

    <Box p="1em">
      <Box display="flex">
        {tabs.map((t, index) => {
          return (
            <>

              <Box flex={resourcesTabs[index][0] == null ? 1 : resourcesTabs[index][0]['width_class']} ml="1em">

                <Typography variant="h6" gutterBottom>{t}</Typography>

                {resourcesFields[index] && resourcesFields[index].map((f, index) =>
                  generateInputField(f, index)
                )}
              </Box>

              {resourcesTabs[index][0]['new_line_after'] && </Box><Box display="flex">}

            </>

          );


        })}

      </Box>
    </Box>

但是我收到以下错误

Parsing error: Unexpected token

因为它抱怨此行的close open标签动态

          {resourcesTabs[index][0]['new_line_after'] && (</Box><Box display="flex">}

任何想法如何解决这个问题?