我在网上看到了很多解决这个问题的方法，但是我不知道这些方法如何适用于我的情况。表单看起来像这样（我删除了一些不相关的内容，包括Submit按钮，以使它简短）：

interface FormState {
  firstName: string;
  lastName: string;
}

const EnterDetails = () => {
  const [formState, setFormState] = React.useState<FormState>({
    firstName: '',
    lastName: '',
  });

  const onChangeText = (fieldName: string, newValue: any) => {
    const newFormState = { ...formState };
    newFormState[fieldName] = newValue.target.value;
    setFormState(newFormState);
  };

  return (
      <Box>
        <FormRow>
          <My_TextField
            label="First name"
            value={formState.firstName}
            onChange={(v) => onChangeText('firstName', v)}
          />
          <My_TextField
            label="Surname"
            value={formState.lastName}
            onChange={(v) => onChangeText('lastName', v)}
          />
        </FormRow>
      </Box>
  );
};

export default EnterDetails;

FormRow和My_TextField定义如下（styled、Box、Typography等从@mui/material导入）：

const StyledRow = styled(Box)(() => ({
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'stretch',
    width: '100%',
}));

const FormRow = ({ children }: { children: any }) => {

  return <StyledRow>{children}</StyledRow>;
};

export default FormRow;

以及

const BootstrapLabel = styled(InputLabel)(({ theme }) => ({
  color: theme.palette.mainText.main,
}));

const BootstrapInput = styled(InputBase)(({ theme }) => ({
  color: theme.palette.altText.main,
}));

const My_TextField= ({
  label,
  value,
  onChange,
}: IProps) => {
  return (
    <Box>
      <BootstrapLabel shrink={false}>{label}</BootstrapLabel>
      <FormControl>
        <BootstrapInput
          value={value}
          onChange={onChange}
        />
      </FormControl>
    </Box>
  );
};

export default My_TextField;

表单看起来很好，但是当我试图在其中一个字段中输入文本时，它一次只会接受一个字符--每输入一个字符后，它就会失去焦点，所以我必须单击回到输入字段才能键入下一个字符。
在我在线看到的解决方案中，人们提到当一个组件被定义在另一个组件中时会出现这个问题，但我看不到我在哪里做过，除非我没有正确理解它。