What's wrong with my Navbar menu refusing to fire onClick

I have this Codesandbox with a Hamburger menu that refuse to let onClick work.

This image show the simple menu with the Timeline link
(it's suppose to be text color white but Codesandbox refuses)
Clicking the link does not fire the onClick it's like it's being blocket by another component.

I have tested to remove the Component NavLinkPage that is rendered at the same time and then my Menu works. It's like it's blocking even it's set to be off screen.

I have tried to set e.g. the z-index but with no luck the only think that works is removing the:

<NavLinkPage close={close} />..

The simple Menu is the Component:

<SideMenu close={close} />..

NavLinkPage are controlled by @media (max-width: 1098px).. and will show on large screens only.

here is CollapseMenu.jsx code with NavLinkPage and NavLinkPage :

import React, { useRef, useCallback, useEffect } from 'react';
import styled from 'styled-components';
import { useSpring, animated } from 'react-spring';
import useOnClickOutside from './UseOnClickOutside';
import NavLinkPage from './NavLinkPage';
import SideMenu from './SideMenu';

const CollapseMenu = props => {
    const { show, close } = props;
    const { open } = useSpring({ open: show ? 0 : 1 });

    const reference = useRef();
    useOnClickOutside(reference, close, 'burgerMenu');

    const escFunction = useCallback(
        event => {
            // only accept 27 if it's visible
            if (event.keyCode === 27 && show === true) {
                close();
            }
        },
        [close],
    );

    useEffect(() => {
        document.addEventListener('keydown', escFunction, false);
        return () => {
            document.removeEventListener('keydown', escFunction, false);
        };
    }, [escFunction]);

    if (show === true) {
        return (
            <CollapseWrapper
                style={{
                    transform: open
                        .interpolate({
                            range: [0, 0.2, 0.3, 1],
                            output: [0, -20, 0, -200],
                        })
                        .interpolate(openValue => `translate3d(0, ${openValue}px, 0`),
                }}
            >
                <NavLinkPage close={close} />
                <SideMenu close={close} />
            </CollapseWrapper>
        );
    }
    return null;
};

export default CollapseMenu;

const CollapseWrapper = styled(animated.div)`
    background: #2d3436;
    position: fixed;
    left: 0;
    right: 0;
    width: 200px;
    z-index: 100;
`;