JSX indentation error

[jcubic]

Another example of JSX error, this time different type:

export default function TreeView({ data }: TreeProps) {
  return (
    <Tree
      data={data}
      levelOffset={23}
      renderNode={({ node, expanded, hasChildren, elementProps }: RenderTreeNodePayload) => (
        <Group gap={5} {...elementProps}>
          {hasChildren && (
              <>
                <IconChevronDown
                    size={18}
                    style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
                />
                <span>{node.label}</span>
              </>
          )}
                         {!hasChildren && <NoteButton>{node.label}</NoteButton>}
        </Group>
      )}
    />
  );
}

the expression: {!hasChildren && <NoteButton>{node.label}</NoteButton>} is aligned to closed: {hasChildren &&.

[jcubic]

Another example for broken renderProp:

    <Tree
      data={data}
      levelOffset={23}
      expandOnClick={false}
      renderNode={({ node, tree, expanded, hasChildren, elementProps, selected }: RenderTreeNodePayload) => {
        function toggle(event: AnchorMouseEvent) {
          ignoreEvent(event);
          tree.toggleExpanded(node.value);
        }
        return (
          <Group gap={5} {...elementProps}>
                     {hasChildren && (
                       <Flex
                         justify="flex-start"
                         align="center"
                         direction="row"
                       >
                         <span onClick={toggle}>
                           <IconChevronDown
                             size={18}
                             style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
                           />
                         </span>
                         <Flex
                           direction="row"
                           gap={5}>
                           <NavLink
                             href="#required-for-focus"
                             active={selected}
                             h={28}
                             onClick={toggle}
                             label={node.label}
                           />
                           <ToolbarIcon icon={<IconFilePlus size={14}/>} onClick={() => {
                             newNote();
                             console.log(tree.hoveredNode);
                           }}/>
                         </Flex>
                       </Flex>
                     )}
          {!hasChildren && (
            <NavLink
              href="#required-for-focus"
              label={node.label}
              onClick={(event) => { ignoreEvent(event); tree.select(node.value); }}
              leftSection={<IconFileText size="1rem" stroke={1.5} />}
            />
          )}
          </Group>
        );
      }}
    />

The indentation of the first and second curly brace is wrong.