40 и "40px" - это все же не одно и то же. Да, в случае с реактом на выходе мы получим одно и то же, но это уже механика реакта. Он просто так устроен, что если на вход число, то это будут пиксели (то есть он конвертирует). Но в задаче все же ожидается 40 (именно число), так что если что-то другое - то это не 40.
С цветом тоже немного не так. Там же в стилях два раза purple:
const styles = {
fontSize: 40,
color: 'purple',
border: '2px solid purple'
}
Один для цвета текста (color), а другой для границ (бордера).