Material-ui: Links don't work inside a ToolTip?

[Technologeek]

I've forked this code off the official documentation with some changes in the props and surprisingly, the links rendered inside the tooltip aren't clickable. That is, on clicking them, it takes nowhere as intended to be.

Source:
CodeSandBox: https://codesandbox.io/s/material-demo-b6c6f

import React from 'react';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';

export default function TriggersTooltips() {
  const [open, setOpen] = React.useState(false);

  const handleTooltipClose = () => {
    setOpen(false);
  };

  const handleTooltipOpen = () => {
    setOpen(true);
  };

  return (
    <div>
      <Grid container justify="center">
          <ClickAwayListener onClickAway={handleTooltipClose}>
            <div>
              <Tooltip
                PopperProps={{
                  disablePortal: false,
                }}
                onClose={handleTooltipClose}
                open={open}
                disableFocusListener
                disableHoverListener
                disableTouchListener
                title={
                  <React.Fragment>
                   <a href="https://www.w3schools.com">Visit W3Schools.com!</a>
                  </React.Fragment>
                }
              >
                <Button onClick={handleTooltipOpen}>Click</Button>
              </Tooltip>
            </div>
          </ClickAwayListener>
        </Grid>
    </div>
  );
}

[Technologeek]

I know the fix could be adding pointer-events: auto !important to the CSS but it should be easier to set via prop no?

[oliviertassinari]

Simpler:

<Tooltip
  interactive
  title={<a href="https://www.w3schools.com">Visit W3Schools.com!</a>}
>
  <Button onClick={handleTooltipOpen}>Click</Button>
</Tooltip>