делает это не CRA или реакт, а браузер, в примере на codepen у тебя используется древняя версия реакта, от того и результаты разные.
попробуй
document.body.style.color = 'hsl(10, 10%, 10%)';
если честно, не вижу в этом никакой проблемы, ты ведь внутри реакта работаешь с hsl значением, так какая разница во что он там конвертирует на выходе.
проблема может возникнуть если только ты будешь читать атрибут напрямую у DOM элемента, и тебе нужен будет hsl, но в таком случае ты что-то делаешь неправильно.
Простой
