React-Hook Form: How do I convert the value of the quantity into a number that is inside the useFieldArray?

Question

I have already declared the input to only receive numbers:

  <input
              type="number"
              name={`order[${nestIndex}].variantion[${k}].qty`}
              ref={register({ required: true })}
              defaultValue={item.qty}
              style={{ marginRight: "25px" }}
            />

But this would still save as a string. How can I convert the value of the quantity into a number or if I could parse this into an integer?

The quantity input field is in the nestedFieldArray

export default ({ nestIndex, control, register }) => {
  const { fields, remove, append } = useFieldArray({
    control,
    name: `order[${nestIndex}].variation`
  });

  return (
    <div>
      {fields.map((item, k) => {
        return (
          <div key={item.id} style={{ marginLeft: 20 }}>
            <label>{k + 1}</label>

            <input
              type="number"
              name={`order[${nestIndex}].variantion[${k}].qty`}
              ref={register({ required: true })}
              defaultValue={item.qty}
              style={{ marginRight: "25px" }}
            />

            <Size
              name={`order[${nestIndex}].variantion[${k}].color`}
              menuItems={colorItems}
              refer={register({ required: true })}
              defaultValue={item.color}
              control={control}
            />
          </div>
        );
      })}
      <hr />
    </div>
  );
};

I recreated this in: https://codesandbox.io/s/react-hook-form-data-in-step-1-and-step-2-with-nestedarray-7hyksh?file=/src/nestedFieldArray.js:485-1532

This is what the data looks like in the console: