"ReferenceError: useOutsideClick is not defined" in website

[keemtj]

Description

When I entered Chakra-UI web page, an error had already occurred. check the error please

Chakra UI Version
2.8.2

Problem Statement/Justification

Problem: Reference error occur in the example code of the library documentation, making it difficult for users to follow the examples.

Proposal: It is expected that resolving error in the example code can address user confusion when reading the documentation.

Reasons:
Improved user convenience: Users can receive support to understand and resolve issues with example code.
Enhanced documentation quality: Enhancing the quality of library documentation can provide users with a better experience.

Proposed Solution or API

Alternatives

No response

Additional Information

please check this link and screenshots

https://v2.chakra-ui.com/docs/hooks/use-outside-click

[Saloni-hub]

I am checking github repo they are not added any custom hook useOutSideClick u can make your hook and enable above properties like this

import React, { useRef, useState, useEffect } from "react";
import { ChakraProvider, Box } from "@chakra-ui/react";
import ReactDOM from "react-dom";

function useOutsideClick(ref, handler) {
useEffect(() => {
function handleClickOutside(event) {
handler(event);
}

document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref, handler]);
}

function Example() {
const [isModalOpen, setIsModalOpen] = useState(false);
const modalRef = useRef(null);

useOutsideClick(modalRef, () => {
setIsModalOpen(false);
});

return (
<>
<button onClick={() => setIsModalOpen(true)}>Open Modal
{isModalOpen && (

👋 Hey, I'm a modal. Click anywhere outside of me to close.

)}
</>
);
}

function App() {
return (

);
}

const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>

</React.StrictMode>,
rootElement
);