I have been trying to render a live component, like this as in the docs:

  <h1>Home</h1>
  <p>Welcome to the home page</p>

  <.live_component module={CellitWeb.HomeHeroComponent} id="home" />

</div>```

I keep on getting this error however:
```** (exit) an exception was raised:
    ** (ArgumentError) errors were found at the given arguments:

  * 1st argument: not an atom

         :erlang.apply(%{__changed__: nil, id: "home", module: CellitWeb.HomeHeroComponent}, :__live__, [])```

Whenever I remove this line:
```  <.live_component module={CellitWeb.HomeHeroComponent} id="home" />

the error is no more, I am not sure why the error is there and I’d like some help and insight on this.