React To Laravel POST request throws error but API working fine With Postman

So I am trying to send a post request with the data about an announcement. The data includes TITLE, TYPE, DESCRIPTION. for backend I am using laravel with the following controller code.

class PostController extends Controller{
public function store(Request $request){
    $post = new Post;
    $post -> title = $request -> input('title');
    $post -> type = $request -> input('type');
    $post -> desc = $request -> input('desc');
    $post -> save();

    return response() -> json([
        'status'=> 200,
        'message' => 'Post Stored Successfully'
    ]);
}}

the Routing looks like following

Route::Post('/addPost',[PostController::class, 'store'] );

I am using the following component code in react to send the post request.

import axios from "axios";

import "./../styles/postEditor.css";

class PostEditor extends React.Component {
    constructor(props) {
        super(props);
        this.state = { type: "Announcement" };
    }

    state = {
        title: "",
        type: "",
        description: "",
    };

    handleInput = (e) => {
        this.setState({ [e.target.name]: e.target.value });
    };

    savePost = async (e) => {
        e.preventDefault();

        const res = await axios.post(
            "http://127.0.0.1:8000/api/addPost",
            this.state
        );
        if (res.data.status === 200) {
            console.log(res.data.message);
            this.setState({ title: "", type: "", description: "" });
        }
    };
    render() {
        return (
            <div className="postEditor">
                <div className="editorTitle"> Create/Update Post</div>
                <form onSubmit={this.savePost}>
                    <div className="postForm">
                        <label className="top">Title:</label>
                        <input
                            type="text"
                            name="title"
                            className="titleInput"
                            value={this.state.name}
                            onChange={this.handleInput}
                            placeholder="Enter the Title"
                            required
                        />
                    </div>
                    <div className="postForm">
                        <label>Type:</label>
                        <select
                            name="type"
                            className="form-control highlight"
                            value={this.state.type}
                            onChange={this.handleInput}
                            required
                        >
                            <option value="Technology">Technology</option>
                            <option value="Programming">Programming</option>
                            <option value="Design">Design</option>
                            <option value="Development">Development</option>
                            <option value="Creativity">Creativity</option>
                        </select>
                    </div>
                    <div className="postForm">
                        <label>Description:</label>
                        <textarea
                            type="text"
                            name="description"
                            className="descInput"
                            value={this.state.desc}
                            onChange={this.handleInput}
                            placeholder="Write Something"
                            required
                        />
                    </div>
                    <button type="submit" className="primary">
                        Submit
                    </button>
                </form>
            </div>
        );
    }
}

export default PostEditor;

I keep getting the following errors

But when I send a post request with Postman everything seems to work fine on backend.