fix(ui-modal): fix second modal closing the first one if two of them are open

[balzss]

INSTUI-3929

test plan:

• use the following modal example:

const fpo = lorem.paragraphs(5)

class Example extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      open: false,
      open2: false,
    }
  }

  handleButtonClick = () => {
    this.setState(function (state) {
      return { open: !state.open }
    })
  };

  handleButton2Click = (event) => {
    this.setState(function (state) {
      return { open2: !state.open2 }
    })
    console.log('kettes bezar')
  };

  renderCloseButton () {
    return (
      <CloseButton
        placement="end"
        offset="small"
        onClick={this.handleButtonClick}
        screenReaderLabel="Close"
      />
    )
  }

  renderCloseButton2 () {
    return (
      <CloseButton
        placement="end"
        offset="small"
        onClick={this.handleButton2Click}
        screenReaderLabel="Close"
      />
    )
  }

  render () {
    return (
      <div style={{ padding: '0 0 11rem 0', margin: '0 auto' }}>
        <Button onClick={this.handleButtonClick}>
          {this.state.open ? 'Close' : 'Open'} the Modal
        </Button>
        <Modal
          open={this.state.open}
          onDismiss={() => { this.setState({ open: false }) }}
          size="auto"
          label="Modal Dialog 1"
          shouldCloseOnDocumentClick
        >
          <Modal.Header>
            {this.renderCloseButton()}
            <Heading>Hello World</Heading>
          </Modal.Header>
          <Modal.Body>
            <TextInput renderLabel="Example" placeholder="if you hit enter here, it should submit the form" />
            <Text lineHeight="double">{fpo}</Text>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={() => { this.setState({ open2: true }) }} margin="0 x-small 0 0">open modal 2</Button>
            <Button onClick={this.handleButtonClick} margin="0 x-small 0 0">Close</Button>
          </Modal.Footer>
        </Modal>
        <Modal
          open={this.state.open2}
          onDismiss={() => { this.setState({ open2: false }) }}
          size="auto"
          label="Modal Dialog 2"
          shouldCloseOnDocumentClick
        >
          <Modal.Header>
            {this.renderCloseButton2()}
            <Heading>Hello World</Heading>
          </Modal.Header>
          <Modal.Body>
            <TextInput renderLabel="Example" placeholder="if you hit enter here, it should submit the form" />
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.handleButton2Click} margin="0 x-small 0 0">Close 2</Button>
            <Button onClick={() => console.log('yoyo')} margin="0 x-small 0 0">yoyo</Button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }
}

render(<Example />)

• open the first modal then open the second
• close the second modal with its close button -> the first modal should remain open

[github-actions]

Preview URL: https://1355--preview-instui.netlify.app