Passing a fetcher as a component prop?

room/create.tsx

export async function action({ request }: ActionArgs) {
  const formData = await request.formData();

  const action = formData.get("_action");

  switch (action) {
    case "add": {
      // do something
    }

    case "remove": {
      // do something
    }

    case "submit": {
      // do something
    }

    default: {
      throw Error("Unhandled Create Room action");
    }
  }
}

export function CreatePage() {
  const filmInput = useFetcher();
  const films = filmInput.data?.films;

  return (
    <MovieSearch fetcher={filmInput} />
    {films && films.map(film => {
      // render films data here
      }
    )}
  )
}

MovieSearch.tsx

export function MovieSearch({ fetcher }) {
  // I don't want to write out all the code but basically theres a:
  <fetcher.Form method="post" action="/room/create">
    // stuff is submitted inside here
  </fetcher.Form>
}

Is these even doable?
Am I taking some kind of really cursed approach?
I have a standalone fetcher inside the MovieSearch function to call an API route which works perfectly fine but submitting data from the prop-fetcher doesn't result in the action being run on the /room/create route

#Passing a fetcher as a component prop?