Button not clickable with div in negative z index in tailwind css - css

Question

I'm using Next.js with typescript and Tailwind CSS. (T3 stack)
I'm having trouble making the button clickable here is the code. I susspect that the div page is blocking the div and making all unclickable but I don't know how to do it. I think that the fix may be making the div where I call the component somehow not clickable
import React, { useRef, useContext, useState, useCallback } from "react";
import Image from "next/image";
import { FaChevronDown } from "react-icons/fa";
import { ScrollContext } from "../utils/scroll-observer";
const Masthead: React.FC = () => {
const refContainer = useRef<HTMLDivElement>(null);
const { scrollY } = useContext(ScrollContext);
let progress = 0;
const { current: elContainer } = refContainer;
if (elContainer) {
progress = Math.min(scrollY / elContainer.clientHeight, 1);
}
return (
<div
ref={refContainer}
className="min-h-screen flex flex-col items-center justify-center sticky top-0 -z-10"
style={{
transform: `translateY(-${progress * 20}vh)`,
}}
>
<video
autoPlay
loop
muted
playsInline
className="bg-white absolute w-full h-full object-cover"
>
<source src="/assets/background_video.mp4" />
</video>
<div className={`flex-grow-0 pt-10 transition-opacity duration-1000`}>
<Image src="/logoLiteContract.png" width={70} height={70} alt="logo" />
</div>
<div className="p-12 font-bold z-10 text-white drop-shadow-[0_5px_3px_rgba(0,0,0,0.4)] text-center flex-1 flex items-center justify-center flex-col">
<h1 className="mb-6 text-4xl xl:text-5xl">Lite contract</h1>
<h2 className="mb-2 text-2xl xl:text-3x tracking-tight">
<span>Registrate y empieza subir tus contratos</span>
</h2>
{/* Create a div in z-10 to make the button clickable */}
{/* Create a button for registration with hover effect and animation ensure that the button is on top of the video */}
{/* Space between the buttons*/}
<div className="h-10"></div>
<button className="bg-gray-700 hover:bg-black text-white font-bold py-2 px-4 rounded-full">
Registrate
</button>
{/* Space between the buttons*/}
<div className="h-10"></div>
{/* Create a button for login with hover effect and animation */}
<button className="bg-gray-500 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full">
Iniciar sesión
</button>
</div>
<div className="flex-grow-0 pb-20 md:pd-10 transition-all duration-1000">
<FaChevronDown className="w-10 h-10 text-white animate-bounce" />
</div>
</div>
);
};
export default Masthead;
Any Ideas?