Why doesn't URL.revokeObjectURL work?

Question

React

Hello. I'm making a modal for images. When I get a file from the API, I use URL.createObjectURL to create a link to it. I read in the documentation that these links take up memory and for each of them you need to free this memory using URL.revokeObjectURL . For some reason this doesn't work in my implementation. If you call this method where I commented it works, but when I call where I close the modal, it doesn’t.

const FilePreviewModal = ({ item }) => {
  const [isModalOpen, setIsModalOpen] = React.useState(false);
  const [previewLink, setPreviewLink] = React.useState('');
  const dispatch = useDispatch();

  const openModal = React.useCallback(() => setIsModalOpen(true), []);
  const closeModal = () => {
    setIsModalOpen(false);
    // Здесь не работает
    URL.revokeObjectURL(previewLink);
  };

  const { loading, error } = useSelector(({ files }) => files);

  React.useEffect(() => {
    if (item) {
      dispatch(getFile(item.id)).then(({ file }) => {
        const link = URL.createObjectURL(file);

        // Здесь если вызвать работает
        // URL.revokeObjectURL(link);

        setPreviewLink(link);
      });
    }

    openModal();
  }, [item, openModal, dispatch]);

  return (
    <Modal show={isModalOpen} onHide={closeModal} size="xl">
      <Modal.Header closeButton>
        <Modal.Title>{item.name}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {loading && <LoadingIndicator />}
        {error && <ErrorIndicator error={error} />}
        {previewLink && <Image src={previewLink} alt={item.name} fluid />}
      </Modal.Body>
    </Modal>
  );
};