How to use slots in <.live_component>?

Questions & Help Questions
,
1

I recently started exploring LiveView.
I can’t figure out how to pass custom named slots into <.live_component>.

Here is my code:

<.live_component
    id="modal"
    module={Modal}
  >
    <:header>
      <p>Welcome from header</p>
    </:header>

    <:content>
      <p>Welcome</p>
    </:content>
  </.live_component>

Modal component:

def render(assigns) do
  assigns =
    assigns
    |> assign_new(:header, fn -> [] end)
    |> assign_new(:content, fn -> [] end)

  ~H"""
    <div class="bg-red-500" id={@id}>
      <div class="border-b-2 border-gray-300 bg-blue-500">
        <%= render_block(@header) %>
      </div>
      <%= render_block(@content) %>
    </div>
  """
end

Error I got:

key :header not found in: %{__changed__: %{flash: true, id: true, inner_block: true}, flash: %{}, id: "modal-1", inner_block: #Function<8.90377761/2 in LiveviewPlaygroundWeb.TestLive.render/1>, myself: %Phoenix.LiveComponent.CID{cid: 1}, socket: #Phoenix.LiveView.Socket<id: "phx-F0LTuDdKH6Jl5wOC", endpoint: LiveviewPlaygroundWeb.Endpoint, view: LiveviewPlaygroundWeb.TestLive, parent_pid: nil, root_pid: nil, router: LiveviewPlaygroundWeb.Router, assigns: #Phoenix.LiveView.Socket.AssignsNotInSocket<>, transport_pid: nil, ...>}

Thanks!