How can I remove the focus of either input box when I press the "enter" key?

I have this code:

import React, { useState } from "react";



import "antd/dist/antd.css";

import { Form, Input, Button, Card } from "antd";



function Login() {

  const [loadings, setloadings] = useState(false);

  const [disabledLoading, setDisabledLoading] = useState(false);



  function changeloading() {

    setloadings(true);

    setDisabledLoading(true);

    setTimeout(() => {

      setloadings(false);

    }, 1630);

  }



  function passwordEnterPress(e) {

    e.target.blur();

  }



  return (

    <div>

      <Card className="home-card">

        <Form>

          <Form.Item name="Username">

            <Input name="username" onPressEnter={passwordEnterPress} />

          </Form.Item>

          <Form.Item name="Password">

            <Input.Password name="password" onPressEnter={passwordEnterPress} />

          </Form.Item>

          <Form.Item>

            <Button

              type="primary"

              htmlType="submit"

              onClick={() => changeloading()}

            >

              Log in

            </Button>

          </Form.Item>

        </Form>

      </Card>

    </div>

  );

}



export default Login;

Codesandbox

EDIT per the documentation link, there's a blur function that I could call to remove the focus, but I don't know how to trigger the function on submit and target the input fields.

If I select either input, it will be focused; however, when I pressed "enter" to submit the form, the focus won't go away. I want the focus to disappear whenever I press the "enter" key that submits the form.

It's worth mentioning that I don't want to forcibly overwrite the focus border. I only want the border to disappear whenever I click the login button (which is already working) or press the "enter" key (entire point of this question).

Thanks in advance.