So I have an input that its default value is obtained from an API call

const [device] = createResource(params.id, getDevice);
const [payload, setPayload] = createStore<any>({
  deviceId: "",
});

createEffect(() => {
  if (device()) {
    setPayload("deviceId", device().deviceId);
  }
});

However, the input value doesn’t get updated when I use the following code

interface DeviceFormInputProps
  extends JSX.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  value: string | number;
  type?: string;
  disabled?: boolean;
  onInput?: (e: InputEvent) => void;
}

const DeviceFormInput: Component<DeviceFormInputProps> = ({
  label,
  value,
  type = "text",
  disabled = false,
  onInput,
}) => {
  return (
    <div>
      <label class="mb-1 block text-sm font-medium text-gray-700">
        {label}
      </label>
      <input onInput={onInput} disabled={disabled} type={type} value={value} />
    </div>
  );
};

Using the component:

<DeviceFormInput label="Device ID" value={payload.deviceId} />

But it works if I directly use the input without any reusable component:

<div>
  <label class="mb-1 block text-sm font-medium text-gray-700">
  Device ID
  </label>
  <input value={payload.deviceId} />
</div>

The question is why the input value is not updating when using the component ?