components/editor/main/parameter.tsx

import { useState } from "react";
import { useUpdateEffect } from "react-use";

interface Props {
  value: string;
  onChange: (value: string, currentValue: string) => void;
}
export const Parameter: React.FC<Props> = ({ value, onChange }) => {
  const [state, setState] = useState(value);
  const [previousValue, setPreviousValue] = useState<string | undefined>(
    undefined
  );

  return (
    <input
      type="text"
      className="bg-indigo-600 !text-white px-1.5 rounded-md outline-none bg-opacity-80 max-w-[80px] text-center truncate"
      onBlur={() => {
        onChange(state, previousValue ?? `{${value}}`);
        setPreviousValue(state as string);
      }}
      value={state}
      onChange={(e) => setState(e.target.value)}
    />
  );
};