I am generating a dl in React:

<dl>

  {

    highlights.map(highlight => {

      const count = text.split(highlight).length - 1;



      return (

        <>

          <dt key={`dt-${highlight.id}`}>{highlight}</dt>

          <dd key={`dd-${highlight.id}`}>{count}</dd>

        </>

      );

    })

  }

</dl>

This gives me the warning:

Warning: Each child in a list should have a unique "key" prop.

This will remove the warning, but doesn't generate the HTML I want:

<dl>

  {

    highlights.map(highlight => {

      const count = text.split(highlight).length - 1;



      return (

        <div key={highlight.id}>

          <dt>{highlight}</dt>

          <dd>{count}</dd>

        </div>

      );

    })

  }

</dl>

And I cannot add a key prop to a fragment (<> </>).

How can work around this?

I am using React 16.12.0.