Unique key in conditional array map error

I am conditionaly rendering rows (the last row does not have a link).

            {items.map((item, index) =>
              index !== items.length - 1 ? (
                <span>
                  <Link to={`/${item.path}`} exact>
                    {item.title}
                  </Link>
                </span>
              ) : (
                <>
                  <span>
                    {item.title}
                  </span>
                </>
              )
            )}

I cannot clear this error:

index.js:1 Warning: Each child in a list should have a unique “key” prop

On my other object maps this works:

         {items.map((item, index) =>
              index !== items.length - 1 ? (
                <span key={index}>
                  <Link to={`/${item.path}`} exact>
                    {item.title}
                  </Link>
                </span>
              ) : (
                <>
                  <span key={index}>
                    {item.title}
                  </span>
                </>
              )
            )}

Why does my key not work in this instance?

Answer

The top level element returned from the .map callback needs to have the key, even if the element is only a fragment wrapper:

{items.map((item, index) =>
    index !== items.length - 1 ? (
        <span key={index}>
            <Link to={`/${item.path}`} exact>
                {item.title}
            </Link>
        </span>
    ) : (
        <React.Fragment key={index}>
            <span>
                {item.title}
            </span>
        </React.Fragment>
    )
)}

Though, in this case, the fragment does nothing, so you can remove it entirely to simplify.

{items.map((item, index) =>
    index !== items.length - 1 ? (
        <span key={index}>
            <Link to={`/${item.path}`} exact>
                {item.title}
            </Link>
        </span>
    ) : (
        <span key={index}>
            {item.title}
        </span>
    )
)}

or even

{items.map((item, index) =>
    <span key={index}>
        {
            index !== items.length - 1
                ? <Link to={`/${item.path}`} exact>
                      {item.title}
                  </Link>
                : item.title
        }
    </span>
)}