fix(ui-tray): fix Tray component unmounting twice when closed

[balzss]

INSTUI-3923

test plan

• open docs app at the Tray component and paste the following code:

function TrayContent() {
  React.useEffect(() => {
    console.log("TrayContent is loaded");

    return () => console.log("Tray content is unloaded");
  }, []);
  return <>This is a test.</>;
}

const FPO = lorem.paragraph()
class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      open: false
    }
  }

  hideTray = () => {
    this.setState({
      open: false
    })
  }

  renderCloseButton () {
    return (
      <Flex>
        <Flex.Item shouldGrow shouldShrink>
          <Heading>Hello</Heading>
        </Flex.Item>
        <Flex.Item>
          <CloseButton
            placement="end"
            offset="small"
            screenReaderLabel="Close"
            onClick={this.hideTray}
          />
        </Flex.Item>
      </Flex>
    )
  }

  render () {
    return (
      <div style={{ padding: '0 0 16rem 0', margin: '0 auto' }}>
        <Button
          onClick={() => { this.setState({ open: true }) }}
          ref={(c) => this._showButton = c}
        >
          Show the Tray
        </Button>
        <Tray
          label="Tray Example"
          open={this.state.open}
          onDismiss={() => { this.setState({ open: false }) }}
          size="small"
          placement="start"
        >
          <View as="div" padding="medium">
            {this.renderCloseButton()}
            <Text as="p" lineHeight="double">{FPO}</Text>
            <TrayContent/>
          </View>
        </Tray>
      </div>
    )
  }
}

render(<Example />)

• open and close the tray component
• the mount and unmount logs should only appear once in the console

[github-actions]

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