LiveView [LiveMotion] Motion element not found, make your target a LiveMotion.motion component

Question

I am trying to use the live_motion library for animations in my phoenix application. I have done the setup as instructed on their github page here. But I am unable to test the examples provided here. Here is how I implemented it in my app:

mix.exs

{:live_motion, "~> 0.3"}

package.json

"dependencies": {
    "live_motion": "file:../deps/live_motion",
    ...
    ...
  },

app.js

// Live Motion Library
import { createLiveMotion } from 'live_motion';

const { hook: motionHook, handleMotionUpdates } = createLiveMotion();

const Hooks = {_, _, motionHook};

LiveComponent

import LiveMotion, only: [motion: 1]

def render(assigns) do
~H"""
<div>
  <motion
    id="popcorn"
    initial={[opacity: 1]}
    exit={[opacity: 0]}
  >
    <span></span>
  </motion>

  <button type="button" phx-target={@myself} phx-click={LiveMotion.JS.hide(to: "#popcorn")}> Eat popcorn </button>
</div>
"""
end

And when I click the Eat popcorn button, I get this error in the console:

[LiveMotion] Motion element not found. Did you forget to make your target a LiveMotion.motion component?