Mysql – Trying to test my php file on my local host but a blank white page just appears with no error messages

I have Apache and mySQL running, there doesn’t appear to be any errors as I’ve checked all the logs; my aim here is to send an email to a specific address whenever there is a new form entry

Im inexperienced with backend and PHP so I’m not too sure where im going wrong, any help would be appreciated

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $firstName = $_POST['firstName'];
    $lastName = $_POST['lastName'];
    $email = $_POST['email'];
    $checkbox = implode(', ', $_POST['checkbox']);
    $message = $_POST['message'];

    // Send email with form data
    $to = '[email protected]';
    $subject = 'New Contact Form Submission';
    $body = "Name: $firstName $lastNamenEmail: $emailnCheckbox: $checkboxnMessage: $message";
    $headers = "From: $email";

    if (mail($to, $subject, $body, $headers)) {
        echo 'Message sent successfully';
    } else {
        echo 'Error sending message';
    }
}
?>

I saved this file in my htdocs folder of my XAMPP installation folder as suggested

I inputted the php file into my react project as such:

axios.post('http://localhost/mihcontactform.php', formData)
            .then(response => {
                console.log(response);
            })
            .catch(error => {
                console.log(error);
            });

I am trying to test this (I created a dummy php file with echo Hello World and it showed up so there isnt any config issues) but a white blank page just shows up when I try to access localhost/mihcontactform.php

For reference, this is what im getting the data from, a form I created in javascript:

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

function ContactForm() {
    const [formData, setFormData] = useState({
        firstName: '',
        lastName: '',
        email: '',
        checkbox: [],
        message: ''
    });

    const handleFormSubmit = (e) => {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);

        axios.post('http://localhost/mihcontactform.php', formData)
            .then(response => {
                console.log(response);
            })
            .catch(error => {
                console.log(error);
            });
    }

    const handleInputChange = (e) => {
        if (e.target.type === 'checkbox') {
            let checkboxValues = formData.checkbox.slice();
            if (e.target.checked) {
                checkboxValues.push(e.target.value);
            } else {
                checkboxValues.splice(checkboxValues.indexOf(e.target.value), 1);
            }
            setFormData({
                ...formData,
                checkbox: checkboxValues,
            });
        } else {
            setFormData({
                ...formData,
                [e.target.name]: e.target.value,
            });
        }
    };

    return (
        <form onSubmit={handleFormSubmit} method='POST' action='mihcontactform.php'>
            <label>
                First Name:
                <input type='text' name='firstName' value={formData.firstName} onChange={handleInputChange} required/>
            </label>

            <label>
                Last Name:
                <input type='text' name='lastName' value={formData.lastName} onChange={handleInputChange} required/>
            </label>

            <label>
                Email:
                <input type='email' name='email' value={formData.email} onChange={handleInputChange} required/>
            </label>

            <label>
                What services are you contacting us about?
                <input type='checkbox' name='checkbox[]' value='A' onChange={handleInputChange} required/> A
                <input type='checkbox' name='checkbox[]' value='B' onChange={handleInputChange} required/> B
                <input type='checkbox' name='checkbox[]' value='C' onChange={handleInputChange} required/> C
                <input type='checkbox' name='checkbox[]' value='D' onChange={handleInputChange} required/> D
            </label>

            <label>
                Message:
                <textarea name='message' value={formData.message} onChange={handleInputChange} required></textarea>
            </label>

            <button type='submit'>Submit</button>
        </form>
    );  
} 

These are the errors I get when I use $_GET instead of $_POST