Cant hover when parallax effect

I have a screen with a background image which is causing an issue. I would really like to have a parallax effect (See line with "// this sticky is the problem"). When I have the sticky class the parallax effect work as intended but the background video appears in front of the content (cant hover and click stuff). If I then remove the sticky the parallax is gone but the buttons work.

This is how the page looks,

And this is the code

import React, { useRef, useState, useContext, useCallback } from 'react';
import Image from 'next/image';
import { IoIosArrowDown, } from 'react-icons/io';
import { MdKeyboardArrowDown } from 'react-icons/md';
import { ScrollContext } from '../utils/scroll-observer';
import s from '../styles/masthead.module.css';



const Masthead: React.FC = () => {
  const [imageLoaded, setImageLoaded] = useState(false);
  const mastheadRef = useRef<HTMLDivElement>(null);
  const { scrollY } = useContext(ScrollContext);
  let progress = 0

  const { current: elContainer } = mastheadRef;
  if (elContainer) {
    progress = Math.min(1, scrollY / elContainer.clientHeight);
  }

  const scrollDown = () => {
    // scroll down 100 vh
    window.scrollTo({
      top: window.innerHeight,
      behavior: 'smooth',
    });
  }

  const textStyle = ' font-light w-[50%] md:2xl lg:text-3xl xl:text-4xl mx-3 drop-shadow-[0_5px_3px_rgba(0,0,0,0.2)] border-b-2 border-transparent';
  const bottomBorder = 'hover:border-b-2 hover:border-gray-200'
  const animate = ''
  const topItem = textStyle + bottomBorder + animate;

  return (
    <div
      ref={mastheadRef}
      className='min-h-screen flex flex-col justify-between top-0 -z-10 sticky' // this sticky is the problem
      style={{
        transform: `translateY(${-progress * 20}vh)`
      }}
    >

      <video
        autoPlay
        loop
        muted
        playsInline
        className='absolute w-full h-full top-0 left-0 object-cover z-0 overflow-hidden'
      >
        <source src='/assets/video/background.mp4' type='video/mp4; codecs=hvc1' />
        <source src='/assets/video/background.webm' type='video/webm; codecs=vp9' />
      </video>
      <div className='p-12 z-20 text-white relative'>
        <div className='flex flex-row flex-grow-0 justify-between'>
          <h1 className='text-8xl xl:text-9xl font-bold drop-shadow-[0_5px_3px_rgba(0,0,0,0.4)]'>Qudak</h1>
          <div className='flex flex-row items-center'>
            <h2 className={topItem}>Produkten</h2>
            <h2 className={topItem}>Kontakt</h2>
            <div className={topItem} onClick={scrollDown}>
              <h2 >Om&nbsp;Oss</h2>
            </div>
            <button
              className={`bg-slate-700 text-white items-center font-light !text-2xl !xl:text-3xl rounded-full px-2 py-1 mx-3 drop-shadow-[0_5px_3px_rgba(0,0,0,0.2)] ${textStyle}`}
            >
              Boka&nbsp;Demo
            </button>

            <h2></h2>
          </div>
        </div>
      </div>

      <div className='p-12 flex flex-row justify-between z-10 text-white transition-all duration-1000'>
        <h2 className='flex items-center text-center font-medium z-10 text-white drop-shadow-[0_5px_3px_rgba(0,0,0,0.4)] text-2xl xl:text-3xl'>
          Industriella lösningar, på rätt sätt!
        </h2>
        <p></p>
        <div className='justify-between'>
          <div onClick={scrollDown} className='flex flex-row items-center justify-center cursor-pointer'>
            <MdKeyboardArrowDown size={70} />
          </div>
        </div>
      </div>
    </div >
  );
}



export default Masthead;