React newbie here, i have used firebase authentication to handle my user sessions. So i want when a person is loged in and wants to make payments, there email credentials to be displayed at the top of the payment page as part of there personal information but am not able to display the email details.

Instead i get an error saying (You may need an appropriate loader to handle this file type) Image of the error i get

import React from 'react';
import './Product.css';
import { useStateValue } from './StateProvider';

function payment() {
  const [{ basket, user }, dispatch] = useStateValue();

  return (
    <div className='payment'>
        <div className="payment__container">

            <div className="payment__section">
                    <div className="payment__title"> 
                          <h3>Delivery Address</h3>
                    </div>

                    <div className="payment__address">
                          <p>{user?.email}</p>
                    </div>
            </div>


            <div className="payment__section">

            </div>

            <div className="payment__section">

            </div>
        
        </div>
    </div> 
  )
}

export default payment 

I dont know how to go about the error.

The whole project code is here https://github.com/Elijah-A-W/Amazon-Clone-With-React/blob/master/src/Payment.js