In my react functional component, I have used navigate() [react-router-dom v6] to go forward and backward in the application. I need to detect whether forward/backward is available or not so that i can disable/enable icons. how to find it using react-router-dom methods? or any other javascript methods to detect like using window.history ?

<BackIcon disabled={!canGoBackward} clickHandler={() => navigate(-1)} />
<NextIcon disabled={!canGoForward} clickHandler={() => navigate(1)} />

if i use if(navigate(1) !== null), the condition itself navigates it and not able to check.

const canGoForward = navigate(1) !== null ? true : false;
<NextIcon disabled={!canGoForward} clickHandler={() => navigate(1)} />