Toggle body class through Helmet – Blancer.com Tutorials and projects

I’m trying to create an image overlay with no scroll, and I therefore need to style the body when my li is active. I’m trying to do this through Helmet, but it’s not working. It just says <body class=""> in the browser.

The component:

import React, { useState } from "react"
import { Helmet } from "react-helmet"

export default function ToggleActive({ children, size }) {
  const [isActive, setActive] = useState("false")

  const handleToggle = () => {
    setActive(!isActive)
  }

  return (
    <li className={isActive ? size : "active"} onClick={handleToggle}>
      <Helmet>
        <body className={isActive ? null : "no-scroll"} />
      </Helmet>
      {children}
      <button onClick={handleToggle} />
    </li>
  )
}

What’s wrong here?