Why my Hoc component for PopUp doestWork?

Question

Hoc for popup does not work. Hock has a boolean state and two functions that change it. I pass them to the popup opening buttons and to the popup itself. The state changes through the console, but the popup itself does not open.

My HOC component

const Hoc = (Component) => {
const HandleChange = () => {
    const [active, setActive] = useState(false);

    function open() {
        setActive(true)
     
    }

    function close() {
        setActive(false)
    }
    useEffect(() => {
        console.log(active)
    }, [active])
    return (
        <Component activevvv={active} open={open} close={close} />
    )
}
return HandleChange;
 }

 export default Hoc;

And my Button,the button works well, when you click on it, the state changes to true, I see this in the console log.

   function ButtonsOur({ open }) {
   return (
<div className="base__routes__button">
  <Buttons className={"base__button__moreInf open-popup-exc"} Click={open} >Докладніше</Buttons>
  <Buttons className={"base__button__moreInf open-popup-exc"} Click={open} >Забронювати</Buttons>
</div>
  )
 }

 export default Hoc(ButtonsOur);

And my PopU. I pass the state of the current state to this component, and if the state is true, the popAp will be displayed. But nothing happens, although the state in the hockey changes.

function PopUpExc({activevvv, close}) {

return (
    <div className={activevvv ? "popup__bg__exc active" : "popup__bg__exc"}>
        <div className="popup__exc" onClick={e => e.stopPropagation()}>
            <img onClick={close} src={Close} alt="close-popup" className="close-popup_exc" />
            <div className="container">
                <div className="row">