Использование оператора распространения в выражении jsx

Я не уверен, почему я не могу передать массив распространения в качестве значения атрибута в выражении JSX.

Оператор распространения разрешается в значение, которое, как я полагаю, ожидает выражение JSX: значение после оценки выражения.

Обратите внимание, что я пытаюсь распространить массив как значение в атрибуте className кнопки в моем JSX:

....
   render() {
    const {on, className = '', ...props} = this.props
    const btnClassName = [
      className,
      'btn',
      on ? 'btn-on' : 'btn-off',
    ]

    return (
       <button
          className = {...btnClassName} // this throws an error
          aria-label = "Toggle"
          {...props}
        />
     )
.....

Это работает так, как ожидалось: Обратите внимание, что здесь я передаю массив (после .join() его элементов) в качестве значения в атрибуте className кнопки в моем JSX:

....
   render() {
    const {on, className = '', ...props} = this.props
    const btnClassName = [
      className,
      'btn',
      on ? 'btn-on' : 'btn-off',
    ].join(' ')

    return (
         <button
          className = {btnClassName} // this works as expected
          aria-label = "Toggle"
          {...props}
        />
    )
.....

Большое спасибо