I have a textInput nested within a tree view (carbon design system) component but when I start typing the branch node closes

Question

I'm working inside the carbon's tree view component https://carbondesignsystem.com/components/tree-view/usage/ which has a bunch of Branch nodes and leaf nodes as its child.

When I try to set the state of the input using the onChange, the tree view collapses.

const [fileName, setFileName] = useState('');

 <TreeNode
          id="2"
          isExpanded="true"
          label={<span className="treeNodeWithFolder">Concept Metrics</span>}
          renderIcon={() => <Folder />}
          value="Concept Metrics"
        >
          <TreeNode
            id="2-1"
            label={<span className="treeNodeWithFolder">Problem</span>}
            renderIcon={() => <Folder />}
            value="Problem"
          >
            <TreeNode
              id="2-2"
              label={
                <div className="wrapper">                 
                  <span className="treeNodeWithFolder">Observations</span>
                  <Add onClick={(e) => createFile(e)} />
                </div>
              }
              renderIcon={() => <Folder />}
              value="Observations"
            >
              {newFile ? <TreeNode
                className='options'
                id="2-3"
               
                label={
                  <div className="overflowMenu-wrapper">
                    <p>Contribution name
                      <OverflowMenu
                        data-floating-menu-container
                        selectorPrimaryFocus={'.optionOne'}
                      >
                        <OverflowMenuItem itemText="Rename" />
                        <OverflowMenuItem itemText="Open tab" />
                        <OverflowMenuItem itemText="Open panel" />
                        <OverflowMenuItem itemText="Copy Link" />
                        <OverflowMenuItem itemText="Duplicate" />
                        <OverflowMenuItem itemText="Send to archieve" />
                        <OverflowMenuItem hasDivider isDelete itemText="Delete" />
                      </OverflowMenu>
                    </p>
                  </div>
                }
                renderIcon={null}
                value="Contribution name"
              /> : null}
              
            </TreeNode>

            <TextInput
              className="createFileInput"
              id="text-input-1"
              size='sm'
              type="text"
              onChange={(e) => setFileName(e.target.value)}
            />
    

I'm reading the docs but I can't find the root of this behavior. https://carbon-components-react.netlify.app/?path=/docs/components-treeview--with-controlled-expansion

On devtools, I've noticed that when the branch node called Problem is expanded, it has the ul element wrapping all its children :

and when I start typing on the textInput the ul element is gone and the branch node collapses.