Need help on routeLoader$ and more! | Qwik | Page 1

Hi, I need help troubleshooting a problem I encountered recently and don't know how to fix it since I just started using Qwik last week and I'm not a professional. I'm pretty sure I missed something; please let me know how to fix my problem.

The problem is that when I have a credential cookie stored in my browser and then click the "Remove Credential" button in /, the credential cookie is deleted (which is working). However, when I click the 'Page 1', 'Page 2', or 'Page 3' Link Component, MyComponent in /page_x still detects that User is passed as props.user instead of undefined as it should be.

Please let me know if you need further clarification. Thank you in advance.

*) The code will be sent separately due to the Discord's message character limit.

routes/index.tsx

/* ... module imports (no import error) */
import { useUser } from "./plugin@user";
import MyComponent from "~/components/MyComponent/MyComponent";

export default component$(() => {
  const userData: User | undefined = useUser().value;
  
  return (
    <main>
      <Component user={userData} />
    </main>
  )
})

routes/page_1/index.tsx

/* ... module imports (no import error) */
import { useUser } from "../plugin@user";
import MyComponent from "~/components/MyComponent/MyComponent";

export default component$(() => {
  const userData: User | undefined = useUser().value;
  
  return (
    <main>
      <Component user={userData} />
    </main>
  )
})

routes/page_2/index.tsx

/* ... module imports (no import error) */
import { useUser } from "../plugin@user";
import MyComponent from "~/components/MyComponent/MyComponent";

export default component$(() => {
  const userData: User | undefined = useUser().value;
  
  return (
    <main>
      <Component user={userData} />
    </main>
  )
})

routes/page_3/index.tsx

/* ... module imports (no import error) */
import { useUser } from "../plugin@user";
import MyComponent from "~/components/MyComponent/MyComponent";

export default component$(() => {
  const userData: User | undefined = useUser().value;
  
  return (
    <main>
      <Component user={userData} />
    </main>
  )
})

routes/[email protected]

/* ... module imports (no import error) */

export const useUser = routeLoader$(async ({ cookie }) => {
   /* try to check whether the credential cookie is valid */
  
  if (cookieValid)
    return UserData as User
  else
    return undefined;
})

#Need help on routeLoader$ and more!