I am able to move into next step in antd step form even though i have added validation in react.js

I am able to move into next step in antd step form even though i have added validation in react.js
I have used default validation of antd form

 const steps = [
    {
      title: "Service Address",
      content: (
        <Form form={form}>
          <Card>
            <h1>Lead Information</h1>
                <Form.Item
                  rules={[{ required: true }]}
                  name={"first_name"}
                  label="First Name"
                >
                  <Input />
                </Form.Item>
                       </Card>
                          </Form>
     },
    {
      title: "Service Information",
      content: "Second-content",
    },

And this my map loop to return the steps

return (
    <>
      <Steps
        current={current}
      >
        {steps.map((item) => (
          <Step key={item.title} title={item.title} />
        ))}
      </Steps>
      <div className="steps-content">{steps[current].content}</div>
        {current < steps.length - 1 && (
              <Button type="primary" onClick={() => next()}>
                Next
              </Button>
        )}
 )
</>

Can some one please help me with This!
Thanks in Advance