How we can implement a blur effect like iOS 14 AppLibrary? ( The blur effect behind the SearchBar )

I want to make a blurry header like the iOS 14 AppLibrary.

check this image:

like this image I have something like this code:

         GeometryReader { proxy in
        ZStack(alignment: .leading){
          ScrollView(.vertical, showsIndicators: false, content: {
            Spacer()
             .frame(height: 48, alignment: .center)
             .padding(.horizontal, 24)
              .padding(.top, proxy.safeAreaInsets.top)
              .hidden()

            ...

          }).edgesIgnoringSafeArea(.all)
          
          //Need that beautiful blurry header here!          

          VStack(alignment: .center, content: {
            SearchBar()
             .frame(height: 48, alignment: .center)
             .padding(.horizontal, 24)
            
            Spacer()
          })
        }.frame(width: proxy.size.width)

      }

I'm not sure if there is something between the searchBar and ScrollView or not.

have you any idea about the implementation?