createResource not fetching on page change

const fetchLibraries = async (id: string) => {
  const response = await fetch(
    `http://localhost:4000/api/library/category/${id}`
  );
  return response.json();
};

function Category() {
  const params = useParams();
  const [libraries] = createResource(params.id, fetchLibraries);
  return (
    <For each={libraries()}>
      {(library: Library) => (
        <LibraryCard
          name={library.name}
          description={library.description}
          repoURL={library.repoURL}
        />
      )}
    </For>
  );
}

export default Category;

const fetchLibraries = async (id: string) => {
  const response = await fetch(
    `http://localhost:4000/api/library/category/${id}`
  );
  return response.json();
};

function Category() {
  const params = useParams();
  const [libraries] = createResource(params.id, fetchLibraries);
  return (
    <For each={libraries()}>
      {(library: Library) => (
        <LibraryCard
          name={library.name}
          description={library.description}
          repoURL={library.repoURL}
        />
      )}
    </For>
  );
}

export default Category;