Having managed to get notifications to appear by not including a "state" and so using:

Map<String, Object> pageRef = new Map<String, Object>{
    'type' => 'comm__namedPage',
    'attributes' => new Map<String, Object>{
        'name' => 'cvcp__event-details'
    }
};
notification.setTargetPageRef(JSON.serialize(pageRef));

a click on a notification item generates a browser error (in Chrome) of e.g.:

Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'nonce-GzsQXTm1bMh16s0QBEqIhyq4Vrp152Im' https://service.force.com/embeddedservice/ import: blob:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

The Salesforce Platform generated link is:

<a class="notification-link" href="javascript:void(0)" ...>
    ...
</a>

So this is probably an irrelevant error?

There is a successful POST request made to:

https://.../portal/s/sfsites/aura?r=14&ui-notifications-components-notifications-controller.Notifications.markNotificationRead=1

at the same time but that looks like just an update that the notification has been read.

One related post is lightning:navigation not passing the States in URL.

Does anyone understand what part here makes the navigation occur and what I can try to make the navigation work?