React js make background blur when input is focused

Question

I want to create an input field like in the picture, if the input field becomes focused then I want to change the background to blur

image example

Do I have to use a certain library? I'm currently using Material UI

Answer 1

If you are using Material UI, the Backdrop component is something you could try.

You will be able to blur the background, showing only your menu component in the front