TypeError on submit handler (Nextjs) - forms

Question

For a new project (next.js) I'd like to add an on submit handler to a form component and map the input of the form at the bottom of the page. However, I get the typeError message claiming that the "addSpending" is not a function.
Here the code for the form component:
import styled from "styled-components";
export default function NewSpendingForm({ addSpending }) {
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.target);
const data = Object.fromEntries(formData);
addSpending(data);
}
return (
<StyledBody>
<StyledIntro>Please fill the form to add your spendings:</StyledIntro>
<StyledAddSpendingForm onSubmit={handleSubmit}>
<StyledFormLabel>Title</StyledFormLabel>
<StyledFormInput type="text" id="title" name="title" required />
<StyledFormLabel>Amount</StyledFormLabel>
<StyledFormInput type="number" id="amount" name="amount" step="0.01" min="0" required />
<StyledFormLabel>Date</StyledFormLabel>
<StyledFormInput type="date" id="date" name="date" required />
<StyledFormLabel>Category</StyledFormLabel>
<StyledFormSelect type="select" id="category" name="category" required >
<option>Food and Drinks</option>
<option>Clothes</option>
<option>Household</option>
<option>Entertainment</option>
<option>Gasoline</option>
<option>Restaurants</option>
<option>Others</option>
</StyledFormSelect>
<StyledFormButton type="submit">Submit</StyledFormButton>
</StyledAddSpendingForm>
</StyledBody>
);
}
And this one for the page:
import styled from "styled-components";
import NewSpendingForm from "../../components/AddSpendingForm";
export default function AddSpendingPage({ spendingInput, addSpendingInput }) {
return (
<>
<StyledHeader>
<StyledTitle>Add Spendings</StyledTitle>
</StyledHeader>
<StyledBody>
<NewSpendingForm addSpending={addSpendingInput} />
<StyledLogTitle> Your Spendings Log</StyledLogTitle>
<StyledLog>
{spendingInput.map((spendingInput) => (
<StyledLogEntry>
{spendingInput.title}
{spendingInput.amount}€
{spendingInput.date}
{spendingInput.category}
</StyledLogEntry>
))}
</StyledLog>
</StyledBody>
</>
);
}
Thanks a lot in advance!
I expected the form input to be mapped and displayed at the bottom of the page. However, after clicking on the "Submit" button I get the mentioned TypeError message.