Seeking Help with React-Router-Dom Integration for Project Data Retrieval in TypeScript

bash ..../services/project.ts

import * as Http from "@effect/platform/HttpClient"
import { Effect, Layer } from "effect"

import { getSession } from "@/lib/auth"
import { Project } from "@/lib/effect-ts/schemas/projects"

const makeProjectsRepo = Effect.sync(() => {
    return {
        getAllProjects: Effect.gen(function* () {
            const id = 7
            const session = getSession()
            const response = yield* Http.request
                .get(`${import.meta.env.VITE_API_URL}/projects/${id}`, {
                    headers: {
                        Authorization: `Bearer ${session?.accessToken}`,
                    },
                })
                .pipe(Http.client.fetch, Http.response.json)

            const encodedProject: Project.Encoded =
                yield* Project.encode(response)
            return encodedProject
        }),
    }
})

export class ProjectsRepo extends Effect.Tag("@services/ProjectsRepo")<
    ProjectsRepo,
    Effect.Effect.Success<typeof makeProjectsRepo>
>() {
    static Live = Layer.effect(this, makeProjectsRepo)
}