React Remix. loader не работает

UPDATE

Ошибка оказалось в том, что loader() работает только в папке routes, а не в компонентах, а я пытался вызвать всё это в компоненте.

Не могу понять, что я делаю не так. Брал код с документации - не работает, искал в интернете - аналогично. Версия remix 2. Обычный fetch работает отлично

import { useLoaderData } from "@remix-run/react";
import { getDevices } from "~/data/devices";

export default function RecentlyAdded() {
    const devices = useLoaderData(); // always null

    // works fine
    fetch('https://ddd.firebaseio.com/devices.json').then(res => res.json()).then(res => {
        console.log(res)
    })


    return (
        <div className="container pb-100">
            <div className="columns is-multiline is-mobile">
                <div className="column is-full">
                    <h2 className="h3 section-title">Recently Added</h2>
                </div>
                <div className="column is-4-widescreen is-4-desktop is-6-tablet">
                    {devices && devices.map(device => (
                       
                    ))}
                </div>
            </div>
        </div>
    )
}
export async function loader() {
    const devices = await getDevices();
    return devices;
}

Содержимое /data/devices

export async function getDevices() {
    const fetchedData = fetch('https://ddd.firebaseio.com/devices.json');
    return fetchedData;
}