Отправка объекта через props ReactJS

Столкнулся с некоторой проблемой, есть компонент модального окна, в котором собираются данные для отправки в форму, данные собираются в переменную setFormData из хука useEffect:

const [formData, setFormData] = useState({
    materialName: '', materialCost: 0, sheetWidth: 0, sheetHeight: 0
})

В конце формы есть кнопка, которая по моей задумке передает в основной компонент данные из формы модального окна:

<Button variant="primary" onClick={props.addData(formData)}>
                    Сохранить
                </Button>

В основном компоненте модальное окно интегрировано следующим способом:

<AddMaterialCardModal show={modalShow} onClose={() => setModalShow(false)}
                          addData={(d) => addHandler(d)}
    />

Обработчик выглядит вот так:

const addHandler = (data) => {
    const payload = {
        name: data.materialName,
        sheet_width_mm: data.materialWidth,
        sheet_height_mm: data.materialHeight,
        cost: data.materialCost
    }
   console.log(payload)

    // postNewSheetMaterial(payload).then(r => console.log(r))
}

Внизу закомментированна функция , которая отправляет POST req на сервер, собственно проблема возникла, когда я увидел в консоли много запросов, которые по идее должны вызываться только при нажатии сохранения, но они отправляются при каждом изменении стейта (при изменении formData). В текущий момент я вижу, как консоль возвращает содержимое payload , т.к вместо запроса - теперь console.log.

Я пришел к этому способу, т.к до этого я пытался прокинуть данные с формы вот так:

<Button ...... data = { formData}>
                    Сохранить
                </Button>

Но тогда в основном компоненте я не видел formData как объект...

Коллеги, пожалуйста, подскажите, как правильно перекинуть данные с модального окна в компонент, для дальнейшей отправки на сервер?