Bug - modal slotted button in react doesn't trigger on click event

[mmexvr]

Describe the bug
A clear and concise description of what the bug is.
Add a onclick event on a slotted button in react and won't trigger.

There is a workaround applying eventlistern to it instead.

import React from 'react';

class Modal extends React.Component {

  componentDidMount(){
    document.querySelector('#modalComponentBtn').addEventListener('click', () => {
      console.log('Cancfdsafdsafdsel')
    })
  }

  render() {
    return (
    <div className="component-wrapper">
      <h5 className="sdds-headline-05">Modal</h5>
      <button id="modalComponent" className="sdds-btn sdds-btn-primary">Modal Component</button>
      <sdds-modal size="md" selector="#modalComponent">
        <h5 slot="sdds-modal-headline">Modal Component</h5>
        <p slot="sdds-modal-body">
          Modal component 
        </p>

        <button slot="sdds-modal-actions" modal-dismiss="true"
          className="sdds-btn sdds-btn-danger sdds-btn-md">Delete
        </button>

        <button slot="sdds-modal-actions" modal-dismiss="true"
          className="sdds-btn sdds-btn-secondary sdds-btn-md" id="modalComponentBtn">Cancel
        </button>

      </sdds-modal>
    </div>

    )
  }
}

export default Modal;

// functional component

import { useEffect } from 'react';

  useEffect(() => {
   document.querySelector('#modalbtn').addEventListener('click',() => {console.log('button click')})
 });

To Reproduce
Steps to reproduce the behavior and be very detailed

1. Create react project
2. Use the sdds modal
3. add on click event OnClick = { e => { console.log(e)}}
4. See error

Expected behavior
A clear and concise description of what you expected to happen.
Regular click event should work

Version of SDDS or which package
E.g 1.2.3 or @scania/theme-light v2.3.4
SDDS 1.7.0

System information:
Please complete the following information, don't forget version

• Framework: React (latest)
• Device: Desktop
• OS: Mac/Window
• Browser: All

AB#873