No data when using fetch and trying to return them with PHP

I'm actually struggling on the following:
I'd like to send my form datas from JS to PHP. I'm then using Fetch.

Following you'll be able to look at my code. I tried both formData and json.stringify(object) as body. I also tried every content type possible. Didn't work neither. Tried $_POST as well instead of $post in PHP.

import React from 'react';

class Test extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: ""
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(input) {
        if(input.target.type === "text") {
            this.setState({username: input.target.value});
        } else {
            this.setState({password: input.target.value});
        }
    }

    handleSubmit(input) {
        input.preventDefault();
        const formData = new FormData();
        formData.append("username", this.state.username);
        formData.append("password", this.state.password);
        fetch("http://192.168.1.54/test/index.php", {
            method: 'POST',
            headers: {
                //"Content-Type": "application/x-www-form-urlencoded",
                "Content-Type": "multipart/form-data",
                Accept: "*",
                "Access-Control-Allow-Origin": "*",
                body: formData
            }
        }).then((r) => {
            if(r.ok) {
                r.json().then((r) => {
                    console.log(r);
                });
            }
            else {
                console.log(r);
            }
        });
    }

    render() {
        return(
            <form>
                <input type="text" name="username" value={this.state.username} onChange={this.handleChange} />
                <input type="password" name="password" value={this.state.password} onChange={this.handleChange} />
                <input type="submit" value="submit" onClick={this.handleSubmit} />
            </form>
        )
    }

}

export default Test;

PHP:

<?php

	header('Access-Control-Allow-Headers: *');
	header('Access-Control-Allow-Origin: *');

	$post = json_decode(file_get_contents('php://input'), true);
	$user->username = $post['username'];
	echo json_encode($user);
	
?>

OUTPUT:
{"username":null}

Thanks by advance for your help, spent the whole day on this...

EDIT: I also tried if there were no redirections or anything else like this using curl.

try to use the Content-Type header as application/x-www-form-urlencoded and send the form data as a URL-encoded string.

handleSubmit(event) {
  event.preventDefault();
  const formData = new URLSearchParams();
  formData.append("username", this.state.username);
  formData.append("password", this.state.password);
  fetch("http://192.168.1.54/test/index.php", {
    method: 'POST',
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: formData.toString()
  })
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Error: " + response.status);
    }
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });
}

In your PHP script, you're trying to decode the JSON data, but you're actually sending form data as URL-encoded. Instead of using json_decode, you should use $_POST to access the form data directly.

<?php
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Origin: *');

$user = new stdClass();
$user->username = $_POST['username'];
echo json_encode($user);
?>