You need to do a bit of a different approach which is kind of simpler imo.

You need to modify this line in checkout.js to include the index value and key
value. (if you do not include the key value you'll just get an error)
checkout.js ////
{basket.map((item, index) => (
<CheckoutProduct
key={index}
basketIndex={index}
id={item.id}
title={item.title}
price={item.price}
image={item.image}
/>
))}

Then in ProductCheckout.js add the basketIndex value and use it in the dispatch
function
ProductCheckout.js ////
function CheckoutProduct({ basketIndex, id, title, price, image }) {
const [, dispatch] = useStateValue();

const removeFromBasket = () => {

dispatch({
type: 'REMOVE_FROM_BASKET',
basketIndex: basketIndex,
})
}

Finally in the reducer.js file add the 'REMOVE_FROM_BASKET' event which should look
like this
reducer.js ////
case 'REMOVE_FROM_BASKET':
let newBasket = [...state.basket];

newBasket.splice(action.basketIndex, 1);

return {
...state,
basket: newBasket
};

Hope this helps :)