/api/login 419 (unknown status) - React fetch API & Laravel

Question

Laravel api + sanctum

Locally, in postman, everything is fine, results return perfectly:-

curl --location --request POST 'http://127.0.0.1:8000/api/login' \
--header 'Accept: application/vnd.api+json' \
--header 'Content: application/vnd.api+json' \
--form 'email="admin@admin.com"' \
--form 'password="passworD34$"'

From a React front-end, not so:-

Login.js

import { Fragment, useState, useRef } from "react";
import classes from './Login.module.css';

const Login = () => {
  
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [message, setMessage] = useState("");


  let handleSubmit = async (e) => {
    e.preventDefault();
    const { email, password } = e.target.elements

    try {
      const res = await fetch("http://127.0.0.1:8000/api/login", {
        method: "POST",
        body: JSON.stringify({ 
                email: email.value, 
                password: password.value 
        }),
        headers: {
            "Accept" : "application/vnd.api+json",
            "Content" : "application/vnd.api+json"
        },
      });
      let resJson = await res.json();

// console.log(resJson); return;

      if (res.status === 200) {
        setEmail("");
        setPassword("");
        setMessage("User logged in successfully");
      } else {
        setMessage("Some error occured");
      }
    } catch (err) {
      console.log(err);
    }
  };

    return (
        <Fragment>
            <div className={classes['form-holder']}>
                <div className={classes['form-content']}>
                    <form onSubmit={handleSubmit}>
                        <label>Email</label>
                        <input type="text" id="email" />
                        <label>Password</label>
                        <input type="text" id="password" />
                        <button className={classes['btn-primary']} type="submit" value="Login">Login</button>
                    </form>
                </div>
                {message}
            </div>
        </Fragment>
    );

}

export default Login;

The above returns a

Login.js:16, POST http://127.0.0.1:8000/api/login 419 (unknown status)

Any clues please?