[Tooltip] displaying twice when used with SVG icon

In order to have both a styled tooltip and an accessibility friendly icon I am using the Tooltip component along with setting titleAccess on the Icon component, but now two tooltips appear when hovering over. I know that by removing titleAccess from the icon component it will prevent this but then you have a poor accessibility experience.

import React from "react";
import CheckIcon from "@material-ui/icons/CheckCircle";
import { Tooltip } from "@material-ui/core";

export default class Demo extends React.Component {
  render() {
    return (
      <Tooltip title="My tooltip">
        <CheckIcon titleAccess="My tooltip" />
      </Tooltip>
    );
  }
}

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Two tooltips appear when hovering over

Expected Behavior 🤔

Only one should appear

Steps to Reproduce 🕹

https://codesandbox.io/s/material-ui-tooltip-icon-forked-ox00e?file=/demo.js

Steps:

1. Hover over icon for a few seconds

Context 🔦

Trying to have both a styled tooltip and an accessibility friendly icon so screen readers know what the icon represents.

Your Environment 🌎

See reproduction

[ggascoigne]

And that’s what I’m doing, it just loses us the convenience of simply using the icon directly. It’s frustrating to want to use the Tooltip control and then having to track down all of the places that use title and fiddle with them when then have such different behavior. It makes for a very inconsistent DX.

[oliviertassinari]

@cmacdonnacha I have updated my first comment with undefined instead of null, it works the same way.