Component is not updated when prop is changed

const ShowDocument = (props: { documentId: string | undefined; onClose: () => void }) => {
  console.log("ShowDocument: ", props.documentId);
  const { getSecureDocumentLink } = useDocuments();

  const [documentLink] = createResource(props.documentId, async (documentId) => {
    console.log("Fetching new document link: ", documentId);
    if (!documentId) {
      return undefined;
    }
    console.log("Getting secure link for document: ", documentId);
    let link = await getSecureDocumentLink(documentId, false);
    console.log("Got secure link: ", link);
    return link;
  });

  return (
    <div class="flex flex-col h-full w-full">
      <div>
        <button onClick={props.onClose} class="bg-blue-500 rounded font-bold  p-2 border-solid border-2 border-blue-600 hover:bg-blue-600">
          Close
        </button>
      </div>
      <div class="flex-1">
        <Show when={documentLink() && !documentLink.loading} fallback={<span>Loading...</span>}>
          <iframe src={documentLink()} class=" h-full w-full"></iframe>
        </Show>
      </div>
    </div>
  );
};