Can't fix this error message on the console "Each child in a list should have a unique "key" prop." React Js

I’m new whit React. I have always the message on the browser that "Each child in a list should have a unique "key" prop".
I’m working with components and Bootstrap.

I tried in different ways to past the API key={values.id} on the card but something is wrong. Can somebody please help me?

import React, { useState, useEffect } from 'react';


function Home() {

    const [fake, setFake] = useState([]);
    console.log(fake);
    useEffect(() => {
        fakestore();
    }, [])

    const fakestore = async () => {
        const response = await
            fetch('https://api.escuelajs.co/api/v1/products');

        const jsonData = await response.json();

        setFake(jsonData);
    }
    return (
        <>

        <div className='container'>
            <div className='row mt-5'>
                {fake.map((values) => {
                    return (
                        <>
                            
                            <div className='col-12 col-md-6 col-lg-4 mt-5'>
                                <div className="card" key={values.id}>
                                    <img src={values.images} className="card-img-top w-100" alt={values.description} />
                                    <div className="card-body">
                                        <h5  className="card-title">{values.title}</h5>
                                        <p className="card-text">{values.description}</p>
                                        <p className="card-text"><strong>€ {values.price.toFixed(2)}</strong></p>
                                        <button className="btn btn-primary">Add to Wishlist </button>
                                    </div>
                                </div>
                            </div>
                            
                        </>
                    )

                })}
            </div>
        </div>
        </>
    );
}

export default Home;

Thanks

Hope to fix the error message on the browser.

>Solution :

They key needs to attach to the highest parent within the map:

also, you have no need for a fragment here so I’ve removed it

            {fake.map((values) => (
              <div key={values.id} className='col-12 col-md-6 col-lg-4 mt-5'>
                <div className='card'>
                  <img src={values.images} className='card-img-top w-100' alt={values.description} />
                  <div className='card-body'>
                    <h5 className='card-title'>{values.title}</h5>
                    <p className='card-text'>{values.description}</p>
                    <p className='card-text'>
                      <strong>€ {values.price.toFixed(2)}</strong>
                    </p>
                    <button className='btn btn-primary'>Add to Wishlist </button>
                  </div>
                </div>
              </div>
            ))}