ObserveField.tsx

In collection usage

{
  name: "test",
  type: 'text',
  label: "Test",
  admin: {
      readOnly: true,
      components: {
          Field: ObserveField
      }
  }
},

ObserveField.tsx

import { TextField } from "payload/dist/fields/config/types";
import { useField, useWatchForm } from "payload/components/forms";
import React from "react";
import { text } from "payload/dist/fields/validations";
import PayloadInput from "./PayloadInput";

export type Props = Omit<TextField, "type"> & {
  path?: string;
};

const ObserveField: React.FC<Props> = (props) => {
  const { getData } = useWatchForm();

  const {
    path: pathFromProps,
    name,
    required,
    validate = text,
    label,
    minLength,
    maxLength,
    admin: {
      placeholder,
      readOnly,
      style,
      className,
      width,
      description,
      condition,
    } = {},
  } = props;

  const path = pathFromProps || name;

  const memoizedValidate = React.useCallback(
    (value, options) => {
      return validate(value, { ...options, minLength, maxLength, required });
    },
    [validate, minLength, maxLength, required]
  );

  const field = useField<string>({
    path,
    validate: memoizedValidate,
    enableDebouncedValue: true,
    condition,
  });

  const { value, showError, setValue, errorMessage } = field;
  
  // THIS IS IMPORTANT PART, REPLACE .id and .name with fields that you want.
  const mergedValue = `${getData().id}-${getData().name}`;

  React.useEffect(() => {
    setValue(mergedValue);
  }, [mergedValue]);

  return (
    <PayloadInput
      path={path}
      name={name}
      onChange={(e) => {
        setValue(e.target.value);
      }}
      showError={showError}
      errorMessage={errorMessage}
      required={required}
      label={label}
      value={mergedValue}
      placeholder={placeholder}
      readOnly={readOnly}
      style={style}
      className={className}
      width={width}
      description={description}
      inputType="text"
    />
  );
};

export default ObserveField;

PayloadInput.tsx

import React from "react";

import { TextInputProps } from "payload/dist/admin/components/forms/field-types/Text/Input";

import Error from "payload/dist/admin/components/forms/Error";
import FieldDescription from "payload/dist/admin/components/forms/FieldDescription";
import Label from "payload/dist/admin/components/forms/Label";

const Input: React.FC<
  TextInputProps & { inputType: React.HTMLInputTypeAttribute }
> = (props) => {
  const {
    showError,
    errorMessage,
    placeholder,
    readOnly,
    path,
    label,
    required,
    value,
    onChange,
    description,
    style,
    className,
    width,
    inputType,
  } = props;

  const classes = [
    "field-type",
    "text",
    className,
    showError && "error",
    readOnly && "read-only",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div
      className={classes}
      style={{
        ...style,
        width,
      }}
    >
      <Error showError={showError} message={errorMessage} />
      <Label
        htmlFor={`field-${path.replace(/\./gi, "__")}`}
        label={label}
        required={required}
      />
      <input
        id={`field-${path.replace(/\./gi, "__")}`}
        value={value || ""}
        onChange={onChange}
        disabled={readOnly}
        placeholder={placeholder}
        type={inputType}
        name={path}
      />
      <FieldDescription value={value} description={description} />
    </div>
  );
};

export default Input;

Create components dir in src add PayloadInput and ObserveField