I am having trouble with getting my user from my database and mapping it on to the appropriate areas. Now I know the backend works because I checked postman and I am getting the user through the email but I do not really understand how to map the properties of my user after clicking submit.
What the site looks like

Frontend

ViewUser

import axios from 'axios';
import React, { useState, useEffect } from 'react'

import {useParams, useNavigate} from 'react-router-dom'

export default function ViewUser() {

    const [user, setUser] = useState({
        name:"",
        email: "",
        dob: "",
        age: "",
        suggestedCalories: "",
        goal:"",
        lifestyle:"",
        weight:""
    });
    
    const onInputChange = (e) => {
        setUser({ ...user, [e.target.name]: e.target.value });
      };
    
    const {email}=useParams();
    
    useEffect(()=>{
        fetch("http://localhost:8080/calorie_counter/user/${email}")
        .then(res=>res.json)
        .then((result)=>{
            setUser(result)
        })
    }, [])
    
    const onSubmit= async (e)=>{
        e.preventDefault()
        const result = await axios.get("http://localhost:8080/calorie_counter/user/${email}",user)
        setUser(result.data)
      }
    return (
    <div className='col-md-6 offset-md-3 border rounded p-4 mt-2 shadow'>
        <form onSubmit={(e) => onSubmit(e)}>
        <div className='mb-3'>
            <label htmlFor='Email' className='form-label'>
            E-mail
            </label>
            <input
            type={'text'}
            className='form-control'
            placeholder='Enter E-mail'
            onChange={(e)=>onInputChange(e)}
            value={email}
            name='email'
            />
            <button type="submit" className='btn btn-outline-success'>Submit</button>
            <button type="submit" className='btn btn-outline-danger mx-2'>Cancel</button>
        </div>
        </form>
    <div className='card'>
        <div className='card-header'>
            Details of user id : 
            <ul className='list-group list-group-flush'>
                <li className='list-group-item'>
                    <b>Name: </b>
                    {user.name}
                </li>
                <li className='list-group-item'>
                    <b>Email: </b>
                    {user.email}
                </li>
                <li className='list-group-item'>
                    <b>Date of Brith: </b>
                    {user.dob}
                </li>
                <li className='list-group-item'>
                    <b>Age: </b>
                    {user.age}
    
                </li>
                <li className='list-group-item'>
                    <b>Suggested Calories: </b>
                    {user.suggestedCalories}
    
                </li>
                <li className='list-group-item'>
                    <b>Goal: </b>
                    {user.goal}
    
                </li>
                <li className='list-group-item'>
                    <b>LifeStyle: </b>
                    {user.lifestyle}
    
                </li>
            </ul>
        </div>
    
    </div>

)
}

I am expecting to type an Email of a user and click the submit button. After I hit the submit button the corresponding user should appear. I tried to follow some youtube videos on useEffect and useState but I am ultimately confused.