[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

Start with the Tooltip and Icon components in the linked CodeSandbox reproduction at demo.js, using the provided example with titleAccess. Verify the hover behavior and determine that the completed change shows only one tooltip while retaining the icon's accessibility label.