This is in no way an elegant solution. But it's what I got to make it work as you wanted

import React, {useRef, useState, } from 'react';
import Input from '@mui/material/TextField';

export default function BasicTextFields() {
  const searchInput = useRef(null);
  const [isFocused, setFocus] = useState(false);

  const clearInput = () => {
    searchInput.current.value = '';
    searchInput.current.blur();
    setInputFocus(false)
  }

  const setInputFocus = (state)=>{
    const notEmpty = !!searchInput.current?.value;

    if(notEmpty) return setFocus(true)

    setFocus(state)
  }

  return (
    <div>
      <Input
        inputRef={searchInput} 
        id="outlined-basic" 
        label="Outlined" 
        InputLabelProps={{shrink: isFocused}}
        onFocus={()=>setInputFocus(true)}
        onBlur={()=>setInputFocus(false)}
        variant="outlined" />
      <button onClick={clearInput}>Clear</button>
    </div>
  );
}

If what you really want is clearing the TextField programmatically, then just use controlled mode and reset the value state when needed. See uncontrolled-vs-controlled:

export default function BasicTextFields() {
  const [value, setValue] = useState("");
  const clearInput = () => setValue("");

  return (
    <>
      <Input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        label="Outlined"
        variant="outlined"
      />
      <button onClick={clearInput}>Clear</button>
    </>
  );
}

Live Demo

You can use inputProps for catch onBlur event.

    <Input
        id="outlined-basic" 
        label="Outlined" 
        variant="outlined"
        inputProps={{
            onBlur: () => {
                console.log('foo bar')
            }
        }}/>
      <button onClick={clearInput}>Clear</button>