antd form.setFieldValue not working as expected

I am using form.setFieldValue to modifying the form field value which contains the combination of serial and number. But it only takes the number part even though I put them together and created a string like this:

const IDCard = ({ sourcePage, defaultData, form }: any) => {
  const [serial, setSerial] = useState('');
  const [number, setNumber] = useState('');

  const handleSerialChange = (value: string) => {
    setSerial(value);
  };

  const handleNumberChange = (value: string | number | null) => {
    setNumber(value?.toString() || '');
  };

  useEffect(() => {
    form?.setFieldValue('serialNumber', `${serial}${number}`);
  }, [serial, number, form]);

  return (
      <div className={styles.form_grid_container}>
        <Form.Item label="Seriya nömrəsi" name={'serialNumber'}>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              width: '300px',
              height: '52px',
              border: '1px solid #DEE3ED ',
              borderRadius: '5px',
              paddingLeft: '8px',
              boxSizing: 'border-box',
            }}
          >
            <Select
              style={{
                width: 98,
                height: 40,
                gap: '10px',
                background: '#F5F7FA',
                borderRadius: '5px',
              }}
              onChange={handleSerialChange}
              placeholder="Seriya"
            >
              <Option value="AZE">AZE</Option>
              <Option value="AA">AA</Option>
            </Select>
            <InputNumber
              defaultValue={defaultData?.serialNumber}
              value={number}
              onChange={handleNumberChange}
              placeholder="Nömrə"
              style={{
                flex: 1,
                width: '147px',
                height: '24px',
                border: 'none',
                alignItems: 'center',
                display: 'flex',
                outline: 'none',
                boxShadow: 'none',
              }}
             type="number"
            />
          </div>
        </Form.Item>
      </div>
  );
};

I have tried using addOnBefore prop with the inputnumber but it doesn't work that way either. Form.item only takes the number value as a serialNumber field value.

The issue was that I wasnt binding my Form in the parent component. I did create an instance like this const [form] = Form.useForm() but I forgot to do this <Form form={form}>. Now I know that it is necessary