Double edit icon is appearing due to an extra div being created?

Question

Why are there two edit icons showing when the sub folders are hovered? It works on the root folders just fine but when I added the same functionality to the subfolders, it creates a div and adds an extra icon? I am using KnowledgeBaseTables and it has additional padding for subfolders/list, should I use or create my own div that does not add padding to subfolders/list?

Two Edit Icons

KnowledgeBaseTable.tsx

export const KnowledgeBaseTable = (props: IKnowledgeBaseTableProps) => {
  const { children, contents, order, ...otherProps } = props;
  const [isExpandedRoot, setIsExpandedRoot] = React.useState(false);

  return (
    <>
      <TableRow {...otherProps} key={contents.name}>
        <TableCell padding="checkbox">
          <StyledIcon onClick={() => setIsExpandedRoot(!isExpandedRoot)}>
            {isExpandedRoot ? (
              <KeyboardArrowUpIcon />
            ) : (
              <KeyboardArrowDownIcon />
            )}
          </StyledIcon>
        </TableCell>
        {children}
      </TableRow>
      {isExpandedRoot && contents && (
        <KnowledgeBaseExpandedTable contents={contents} rowCount={1} />
      )}
    </>
  );
};

KnowledgeBaseExpandedTable.tsx

return (
    <>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        innerRef={formikRef}
        onSubmit={() => {}}
      >
        {({ values, errors, handleChange }) => (
          <>
            {contents &&
              sortedContents &&
              sortedContents.map((file: any, index: any) => (
                <>
                  <TableRow key={file.name}>
                    {file.meta && (
                      <>
                        <SubFolderContainer rowCount={rowCount}>
                          <SubFolderWrapper>
                            <TableCell padding="checkbox">
                              <StyledIcon
                                onClick={() => {
                                  setIsExpandedSubFolder(!isExpandedSubFolder);
                                }}
                              >
                                {isExpandedSubFolder ? (
                                  <KeyboardArrowUpIcon />
                                ) : (
                                  <KeyboardArrowDownIcon />
                                )}
                              </StyledIcon>
                            </TableCell>

                            <SubFolderTitle>
                              <TableCell
                                component="th"
                                scope="row"
                                onMouseOver={() => {
                                  console.log('hovered subfolder', index);
                                  setIsHovered(index);
                                }}
                                style={{ display: 'flex', background: 'red' }}
                              >
                                {edit === index ? (
                                  <TextFieldWrapping>
                                    <TextField
                                      id="name"
                                      name="name"
                                      value={values.name}
                                      onChange={handleChange}
                                      onKeyUp={(e) => onKeyChange(e, errors)}
                                      variant="outlined"
                                      size="small"
                                    />
                                    <ErrorMessage variant="body2">
                                      {errors.name}
                                    </ErrorMessage>
                                  </TextFieldWrapping>
                                ) : (
                                  <p>{file.name}</p>
                                )}

                                {index === isHovered ? (
                                  <WrapperIcon>
                                    {edit === index ? (
                                      <PairEditIcons>
                                        {' '}
                                        <CheckMarkIcon
                                          onClick={(errors: any) => {
                                            setEdit(null);
                                          }}
                                        />{' '}
                                        <CancelIcon
                                          onClick={() => {
                                            setEdit(null);
                                          }}
                                        />
                                      </PairEditIcons>
                                    ) : (
                                      <EditPenIcon
                                        onClick={() => {
                                          setEdit(index);
                                        }}
                                      />
                                    )}
                                  </WrapperIcon>
                                ) : (
                                  'test value'
                                )}
                              </TableCell>
                            </SubFolderTitle>
                          </SubFolderWrapper>
                        </SubFolderContainer>
                        <TableCell colSpan={1}>
                          {convertISOtoLocalDate(file.meta.updatedDate)}
                        </TableCell>
                      </>
                    )}
                    {file.key && (
                      <>
                        <TableCell padding="checkbox" />
                        <TableCell colSpan={1}>
                          <SubFolderListContainer rowCount={rowCount}>
                            {file.name}
                          </SubFolderListContainer>
                        </TableCell>
                        <TableCell>
                          {convertISOtoLocalDate(file.lastModified)}
                        </TableCell>
                      </>
                    )}
                  </TableRow>
                  {isExpandedSubFolder && file.meta && (
                    <>
                      {index === isHovered ? (
                        <WrapperIcon>
                          {edit === index ? (
                            <PairEditIcons>
                              {' '}
                              <CheckMarkIcon
                                onClick={(errors: any) => {
                                  setEdit(null);
                                }}
                              />{' '}
                              <CancelIcon
                                onClick={() => {
                                  setEdit(null);
                                }}
                              />
                            </PairEditIcons>
                          ) : (
                            <EditPenIcon
                              onClick={() => {
                                setEdit(index);
                              }}
                            />
                          )}
                        </WrapperIcon>
                      ) : (
                        ''
                      )}
                      <KnowledgeBaseExpandedTable
                        contents={file}
                        rowCount={rowCount + 1}
                      />
                    </>
                  )}
                </>
              ))}
          </>
        )}
      </Formik>
      {!sortedContents && (
        <>
          <TableCell colSpan={3}>
            <SubFolderListContainer rowCount={rowCount + 3}>
              You don't have any items in this folder.
            </SubFolderListContainer>
          </TableCell>
        </>
      )}
    </>
  );
};