Радиальный градиент CSS-переход

У меня есть div с background-image и radial-gradiant вот так:

.main-header {
  z-index: 2;
  padding: 1rem;
  background: var(--themeColor3);
  margin-bottom: 1rem;
  padding-bottom: 3.5rem;
  clip-path: polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0);
  text-align: center;
  height: 300px;
  background: radial-gradient(30% 65% at 50% 50%, rgba(0, 0, 0, 0) 35%, #222226 60%), url('./assets/images/jpkMain.png');
  background-repeat: no-repeat;
  background-position: center;
  transition: background 5s;
}

И я пытаюсь увеличить круг радиального градиента при зависании следующим образом:

.main-header:hover {
  background: radial-gradient(32% 75% at 50% 50%, rgba(0, 0, 0, 0) 35%, #222226 60%), url('./assets/images/jpkMain.png');
  background-repeat: no-repeat;
  background-position: center;
}

И это мой код JSX:

    render() {
        return (
            <div className="container">

                <header className="main-header">
                </header>
            </div>
        )
    }