You're initializing CustomWidthTooltip inside the App component, which is causing the tooltip to reintialize on local state change. Whenever the name is updated inside formData local state, the TextField inside the CustomWidthTooltip component is being recreated in the UI, causing the focus loss as a result.

You should move the CustomWidthTooltip out of the component App.

Updated Code

import "./styles.css";
import { useState } from "react";
import { TextField, Box } from "@mui/material";
import { styled } from "@mui/material/styles";
import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";

const CustomWidthTooltip = styled(({ className, ...props }) => (
  <Tooltip {...props} classes={{ popper: className }} />
))({
  [`& .${tooltipClasses.tooltip}`]: {
    maxWidth: 400
  }
});

export default function App() {
  const [formData, setFormData] = useState({
    title: "",
    name: ""
  });
  console.log("formData", formData);

  const handleFormChange = (e) => {
    const { name, value } = e.target;
    console.log({ name, value });
    setFormData((formData) => {
      return {
        ...formData,
        [name]: value
      };
    });
  };

  return (
    <div>
      <h3>With a custom tooltip, it's broken:</h3>
      <Box component="form" display="flex">
        <TextField
          onChange={handleFormChange}
          autoComplete="title"
          name="title"
          id="title"
          label="Title"
          required
        />
        <CustomWidthTooltip title="Custom Custom Custom Custom Custom Custom">
          <TextField
            onChange={handleFormChange}
            autoComplete="name"
            name="name"
            id="name"
            label="Name"
            required
          />
        </CustomWidthTooltip>
      </Box>
      <h3>With a standard tooltip, it works:</h3>
      <Box component="form" display="flex">
        <TextField
          onChange={handleFormChange}
          autoComplete="title"
          name="title"
          id="title"
          label="Title"
          required
        />
        <Tooltip title="Standard">
          <TextField
            onChange={handleFormChange}
            autoComplete="name"
            name="name"
            id="name"
            label="Name"
            required
          />
        </Tooltip>
      </Box>
    </div>
  );
}

As Junaid mentioned, you are re-rendering the tooltip which is why it flashes.

I would personally use their solution and even move custom styled components into another file seeing as you will probably want to reuse them elsewhere.

Regardless, another alternative is the useMemo hook. This is a good opportunity for you to learn about how it can help.

You can leave your CustomWidthTooltip function where it is but just wrap it in useMemo:

import { useState, useMemo } from "react";

...

  const CustomWidthTooltip = useMemo(
    () =>
      styled(({ className, ...props }) => (
        <Tooltip {...props} classes={{ popper: className }} />
      ))({
        [`& .${tooltipClasses.tooltip}`]: {
          maxWidth: 400
        }
      }),
    [listOfDependencies]
  );

...

So this will calculate the styled component and store it to your variable, but it will not recreate it on subsequent renders. The array as the second parameter ([listOfDependencies]), is where you can add variables that it should watch. If there is any change to these variables, it will recompute CustomWidthTooltip.