Cannot add property useEffectEvent, object is not extensible

[medkhalilbk]

👋 Hello guys, i encountered a sudden error after installing the package. Any insights or tips on troubleshooting would be greatly appreciated! Thanks

📝 Details: When attempting to use the useFetch hook inside react client component in NextJS project

🔁 Steps to Reproduce:

When i did

npm i @uidotdev/usehooks@experimental react@
experimental react-dom@experimental --legacy-peer-deps

📎 then i called the useFetch hook inside the react component:

"use client" 
import FacebookCard, { RateComponent } from "./FacebookCard";
import googleIcon from "../../../../public/google-icon.png";
import React, { useState } from "react"; 
import Image from "next/image";
import Carousel from "react-elastic-carousel"; 
// interface review
import { useFetch } from "@uidotdev/usehooks";
export type IReviews = {
    id: string;
    rating: number;
    comment: string;
    author: string;
}

function Reviews() {
  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
      const { error, data } = useFetch(`http://localhost:3000/api/google-reviews`);
    /* const { state, dispatch } = useReviewsContext(); */
    
 const fakeReviews: IReviews[] = [
   {
     id: "1",
     rating: 5,
     comment: "I love this place",
     author: "John Doe",
   },
   {
     id: "2",
     rating: 4,
     comment: "Great experience!",
     author: "Jane Smith",
   },
   {
     id: "3",
     rating: 3,
     comment: "It was okay",
     author: "Alice Johnson",
   },
   {
     id: "4",
     rating: 2,
     comment: "Needs improvement",
     author: "Bob Brown",
   },
   {
     id: "5",
     rating: 1,
     comment: "Terrible service",
     author: "Emily Davis",
   },
 ];

  const SocialMediaSection = (props:any) => {
    return (
      <div
        style={{
          width: "50%",
          justifyContent: "center",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <Image style={{ margin: "auto" }} src={props.img} />
        <h1 cstyle={{ display: "flex", justifyContent: "center" }}>
          {props.number} / 5
        </h1>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <RateComponent number={props.number} />
        </div>
        <p>Basé sur x avis</p>
      </div>
    );
  }

  return (
    <div className="reviewsBackground">
      <h1 className="title-map">
        NOS MEILLEURS AMBASSADEURS,{" "}
        <span className="secondaryText">c’est vous.</span>
      </h1>
      <p>
        Parce que nous sommes des experts. Parce que nous faisons tout pour vous
        simplifier la vie. Parce que nous proposons une qualité de service 6
        étoiles. Parce qu'on sait prendre soin de vous. Mais c'est évidemment
        vous qui en parlez le mieux.
      </p>
      <div></div>
      <Carousel pagination={false} itemsToShow={4} showArrows={false} > 
        {fakeReviews.map((review) => {
          return <FacebookCard review={review} />;
        })}
      </Carousel>

      <div style={{display:"flex", padding:"5%"}}>
        <SocialMediaSection img={googleIcon} rate="Google" number={4} />
        <SocialMediaSection img={googleIcon} rate="Facebook" number={3} />
      </div>
    </div>
  );
}

export default Reviews;

📌 Note:

Using NodeJS v18.17.1 "next": "14.1.0", "@uidotdev/usehooks": "^2.4.1-experimental.1"