Cannot set cookie in iframe using Storage Access API on Safari

I have an iframe on my page. As Safari blocks 3rd party cookies, I am trying to use the Storage Access API as suggested here under 'Developer Guidance': https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/. I have copied the following code from here https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API/Using#Accessing_a_user's_cookies_in_an_embedded_cross-origin_iframe:

<script type="text/javascript">
  window.addEventListener('load', () => {
  document.getElementById('test-button').addEventListener('click', () => {
  document.hasStorageAccess().then(hasAccess => {
  console.log('hasAccess: ' + hasAccess);
  if (!hasAccess) {
  return document.requestStorageAccess();
  }
  }).then(_ => {
  console.log('Now we have first-party storage access!');
  document.cookie = "foo=bar";
  console.log(`document.cookie: ${document.cookie}`);
  }).catch(_ => {
  console.log('error');
  });
  });
  });
</script>
<button id="test-button">Test</button>

Browser console output:

[Log] hasAccess: true
[Log] Now we have first-party storage access!
[Log] document.cookie:

As you can see, the grant seems to be successful but still cannot set the cookie. Does anyone have an idea what's wrong? I am using Safari Version 13.0.1.

Note: The enclosing page is a simple

iframe

src