How to show a tooltip on a toggleButton that’s disabled?

I want to show a tooltip of MUI’s ToggleButton when it is disabled
howerver tooltip works fine when ToggleBUtton is not disabled

for disabled it breaks

 <ToggleButton value={item?.key} aria-label="left aligned" key={item?.key} disabled={true} >
             <Tooltip title="Data Not Available" >
                       <span>{item?.value}</span>
             </Tooltip>
  </ToggleButton> 

I am using MUI- both Tooltip and ToggleBUtton are MUI components
and my project is a react project.

I am importing both components as follows-

import ToggleButton from '@mui/material/ToggleButton';
import Tooltip from '@mui/material/Tooltip';