Pointing the netlify preview button to deployed branch url

**Describe the bug**
When I make a change in my CMS and save it, netlify deploys a preview with https://docs.netlify.com/site-deploys/deploy-previews/. This works flawlessly. However when the preview button shows up, it doesn't link to the preview url, but instead to my default website url.

**To Reproduce**
1. Go to a "page" collection, in your cms, that deploys a page.
2. Make a change in the content.
2. Click on 'save'
3. Click on 'preview'
4. Check what the url is (does it match the deployed branch?)

**Expected behavior**
I'd expect to see the preview button link to the new deploy preview url, instead of the base website url.

Is this how it was intended? Or am I missing something in the code? In its current state, the user would have to go to netlify to find the url name.

**Applicable Versions:**
netlify-cms-app 2.15.60
netlify-cms-core 2.54.1
netlify-cms 2.10.180
provider: github

**CMS configuration**
```
site_url: https://my-website.org # hiding for privacy
publish_mode: editorial_workflow
backend:
name: git-gateway
branch: master
squash_merges: true

local_backend: true

media_folder: static/img
public_folder: /img

## Aliases code here
## Removed, since not fully relevant

collections:
- label: 'Pages'
name: 'pages'
label_singular: 'Page'
folder: 'content/pages'
create: true
format: 'json'
show_preview_links: true
nested:
depth: 100 # max depth to show in the collection tree
summary: '{{meta}}' # optional summary for a tree node, defaults to the inferred title field
editor:
preview: false
fields:
- << : *TITLE
label: Page title for within cms
- *SEO
- *PAGE-COMPONENTS
```

Thanks in advance!