A problem with react-icons integration inside a next-js project with tailwindcss

Question

i'm trying to use react-icons inside a next js project, but i'm not able to see it. This is my code:

import React from "react";
import {MdKeyboardArrowDown} from "react-icons/md";

const MastHead: React.FC = () => {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center">
      <video  autoPlay loop muted playsInline className="absolute w-full h-full object-cover">
        <source src="/assets/layout/video/MastHead.webm" type="video/webm; codecs=vp9"/>
      </video>
      <div className="font-bold z-10 text-center text-white flex-grow-0 flex items-center justify-center flex-col
        drop-shadow-[0_1px_10px_rgba(0,10,104,0.5)] ">        
        <h1 className="m-1 text-3xl md:text-8xl">Hello!</h1>
        <h2 className="m-1 text-sm md:text-4xl">Welcome to my portfolio</h2>         
      </div>
      <div className="flex-0 flex flex-col mb-2 transition-all duration-1000"> 
        <MdKeyboardArrowDown className=""/>     
      </div>
    </div>
  )
}

export default MastHead

and this is the result: Screen.

The problem could be strictly related to the background video, because when i remove it, the icons is shown. Anyway, i'm still not getting the problem. Any idea? Thanks!