How to receive data using file_get_contents?

Here I am trying to send my js object from react app to php file with the help of axios but I am not getting my data there instead it is returning null and connection is made successfully between react and php beacuse if I echo something in php it works but when I try to print object data it returns null so someone can please help me

import { useState } from "react";
import axios from "axios";

const App = () => {
  const [username, setUsername] = useState();
  const [password, setPassword] = useState();
  let [input, setInput] = useState({ username: "", password: "" });

  const nameChangeHandler = (e) => {
    setUsername(e.target.value);
  };

  const passwordChangeHandler = (e) => {
    setPassword(e.target.value);
  };

  const formHandler = (e) => {
    e.preventDefault();

    setInput(((input.username = username), (input.password = password)));
    JSON.stringify(input);
    axios.post("http://localhost:80/api/index.php", input);
    console.log(input);
  };
  return (
    <form onSubmit={formHandler}>
      <label>Username</label> 
      <input type="text" onChange={nameChangeHandler} />

      <label>Password</label>
      <input type="password" onChange={passwordChangeHandler} />

      <input type="submit" />
    </form>
  );
};

export default App;

PHP:

<?php

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

header("Access-Control-Allow-Headers: *");

$data = json_decode( file_get_contents("php://input"));

print_r($data);
var_dump($data);


?>