Анимированные отступы на div при использовании реакции-позы

Question

В своем приложении реагирования я пытаюсь анимировать круглую кнопку, чтобы она стала прямоугольной с полем ввода внутри.

Вот код:

import React from "react";
import ReactDOM from "react-dom";
import posed from "react-pose";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBell } from "@fortawesome/free-regular-svg-icons";
import "./styles.css";

const NotificationButtonWrap = posed.div({
  inactive: { width: 80, borderRadius: 50 },
  active: { width: 310, borderRadius: 5, padding: 10 }
});

const EmailInput = posed.input({
  inactive: { width: 0 },
  active: { width: 300, margin: 10 }
});

class Example extends React.Component {
  state = { isActive: true };

  componentDidMount() {
    setInterval(() => {
      this.setState({ isActive: !this.state.isActive });
    }, 1000);
  }

  render() {
    const { isActive } = this.state;
    return (
      <NotificationButtonWrap
        className="notification__wrapper"
        pose={isActive ? "active" : "inactive"}
      >
        <EmailInput
          className="notification__input"
          pose={isActive ? "active" : "inactive"}
        />
        <FontAwesomeIcon className="notification__icon" icon={faBell} />
      </NotificationButtonWrap>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));

А вот и песочница.

Я ожидаю, что там будет набивка вокруг NotificationButtonWrap элемент, но я не понимаю, я не уверен, почему.