How to create blurry effect with svg over video

Question

I am using react with typescript. In my project, I have a video tag and over it, I have one SVG rect element. Now I want to do a blurry effect on SVG. I tried CSS filter:blur(8px); property but it's making the image completely black and not making it blur.

import './App.css';



const App = () => {


  return <div className='container'>
     <video autoPlay>
         <source src={'https://www.w3schools.com/tags/movie.mp4'} />
     </video>
<svg id="svg">
     <rect className='rectangle' x={80} y={120} width={300} height={300} />
</svg>
  </div>;
};

export default App;

css:

.rectangle{
   filter:blur(8px);
}

This is I am getting

sandbox link