React Hook Form - onSubmit does not works - reactjs

Question

I have following component. I am making this based on react-hook-form documentation. Additionally I add styled components. But I find out problem with button. Submit button does not works. Nothing happen when I click on it
import styled from 'styled-components';
import { useForm } from "react-hook-form";
export const OrderDetailsForm = () => {
const { register, handleSubmit } = useForm();
const onSubmit = (data: any) => console.log(data);
return (
<OrderDetailsFormContainer>
<OrderForm onSubmit={handleSubmit(onSubmit)}>
<OrderDetailsFormContent>
<label>First Name</label>
<OrderDetailsFormInput {...register("firstName")} />
<label>Last Name</label>
<OrderDetailsFormInput {...register("lastName")} />
<label>Phone number</label>
<OrderDetailsFormInput {...register("phoneNumber")} />
<label>Email</label>
<OrderDetailsFormInput {...register("emailAddress")} />
<OrderDetailsFormHeader>Contact details</OrderDetailsFormHeader>
</OrderDetailsFormContent>
<OrderDetailsFormContent>
<label>Street</label>
<OrderDetailsFormInput {...register("street")} />
<label>House number</label>
<OrderDetailsFormInput {...register("houseNumber")} />
<label>City</label>
<OrderDetailsFormInput {...register("city")} />
<label>ZIP code</label>
<OrderDetailsFormInput {...register("zipCode")} />
<OrderDetailsFormHeader>Address</OrderDetailsFormHeader>
</OrderDetailsFormContent>
<input type='submit' />
</OrderForm>
</OrderDetailsFormContainer>
)
}
const OrderDetailsFormContainer = styled.main`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
`
const OrderForm = styled.article`
display: flex;
justify-content: center;
align-items: center;
width: 1200px;
`
const OrderDetailsFormContent = styled.section`
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
border: 1px solid #000;
box-sizing: border-box;
margin: 0 25px;
width: 50%;
padding: 30px 0 20px 20px;
position: relative;
`
const OrderDetailsFormInput = styled.input`
padding: 10px 40px;
margin: 15px 0;
`
const OrderDetailsFormHeader = styled.h1`
position: absolute;
top: -4%;
left: 4%;
margin: 0;
background-color: #fff;
padding: 0 20px;
font-size: 20px;
`
const Button = styled.button`
background-color: black;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
`
Sorry for adding this, but it throws an error It looks like your post is mostly code; please add some more details. But I don't know what I can add more to this post.

Answer 1

Your issue is that you don't have a <form/> element.
Your <OrderForm/> component is rendering an <article/> element - this doesn't have an onSubmit prop, which is why the submission isn't working.
Change styled.article to styled.form here:
const OrderForm = styled.form`

Answer 2

const OrderForm = styled.article`
this line will generate an article element
and you know, article tag does not have onsubmit event.
change this line to:
const OrderForm = styled.form
good luck.