Почему в массиве undefined?

мой код

https://codesandbox.io/s/focused-thompson-w7v9c2?file=/index.tsx

<Formik
        initialValues = {initialValues}
        onSubmit = {async (values) => {
          await new Promise((r) => setTimeout(r, 500));
          // alert(JSON.stringify(values, null, 2));
          values.product.map((item, i: number) => {
            let qty: number[] = [];
            console.info(i + "-------qty------");
            console.info(item.qty);
            console.info(i + "-------price------");
            console.info(item.price);

            if (item.qty! && item.price!) {
              qty[i] = item.qty * item.price;

              console.info(qty);
            }
              const result = qty.reduce((sum, number) => {
                return sum + number;
              }, 0);
              setSum(result)
            console.info("-------result------");
            console.info(result);

            console.info("-------Sum------");
            console.info(sum);
            console.info("-------langth------");
            console.info(i);
          });
        }}
      >

Я добавил цену и количество в непрерывный массив. и мне нужно price + qty в сочетании, но результат массив [ undefined, 30] или [undefined,undefined ,40] Когда я добавляю данные в массив, я хочу записать const [sum, setSum] = useState(0)