У меня есть компонент список контактов, при нажатии на кнопку save он переходит в раздел edit. Как мне реализовать edit компонент. Новичок в реакте

КОМПОНЕНТ EDIT ПО ИЗМЕНЕНИЮ ДАННЫХ, ЗДЕСЬ Я ВЫВОЖУ ДАННЫЕ(КАК В КОМПОНЕНТЕ PROFILE) И ПЫТАЮСЬ ИЗМЕНИТЬ С ПОМОЩЬЮ USESTATE

import logo from "../../photos/avatar.png";
import { style } from "./styles";
import React, { useState, useEffect } from "react";
import axios from "axios";

export function Edit() {
  const [user, setUser] = useState();
  const [tempUser, setTempUser] = useState();

  useEffect(() => {
    axios
      .get("https://my-json-server.typicode.com/RomanChasovitin/demo-api/users")
      .then((res) => {
        setUser(res.data.data);
        setTempUser(res.data.data);
      });
  }, []);

 

  return (
    <div className="row">
      <img style={style.Image} src={logo} />

      <div className="col">
        <input
          type="text"
          style={style.Text}
          className="form-control"
          placeholder="First name"
          aria-label="First name"
          value={tempUser}
          onChange={(e) => {
            setTempUser(...tempUser, e.target.value);
          }}
        />
        <input
          type="text"
          style={style.Text}
          className="form-control"
          placeholder="Last name"
          aria-label="Last name"
        />
      </div>
      <div className="col">
        <input
          type="text"
          style={style.Text}
          className="form-control"
          placeholder="City"
          aria-label="First name"
        />
        <input
          type="text"
          style={style.Text}
          className="form-control"
          placeholder="Country"
          aria-label="Last name"
        />
      </div>
      <div className="col">
        <input
          type="text"
          style={style.Text}
          className="form-control"
          placeholder="Phone Number"
          aria-label="First name"
        />
        <input
          type="text"
          style={style.Text}
          className="form-control"
          placeholder="Email"
          aria-label="Last name"
        />
      </div>
      <div className="col">
        <input
          type="text"
          style={style.Text}
          className="form-control"
          placeholder="Website"
          aria-label="First name"
        />
        <button style={style.Button}>
          Save contact
        </button>
      </div>
    </div>
  );
}



В ЭТОМ КОМПОНЕНТЕ(PROFILE) Я ВЫВОЖУ СПИСОК КОНТАКТОВ

import axios from "axios";
import React, { useState, useEffect } from "react";
import { style } from "./style";
import { useNavigate } from "react-router-dom"

import { faLocationDot, faPhoneVolume, faGlobe, faEnvelope } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";


export function Profile() {
  const [state, setState] = useState([]);

  const navigate = useNavigate();
  
    const editPage = () => {
        navigate("/edit")
    }


  useEffect(() => {
    axios
      .get("https://my-json-server.typicode.com/RomanChasovitin/demo-api/users")
      .then((res) => {
        setState(res.data.data);
      });
  }, [setState]);

  return (
    <div style={style.Display}>
        {state.map((person) => {
          return (
             <div className="card" style={style.Card} key={person.id}>
          

                <img src={person.image} style={style.Photo} className="card-img-top" alt="..."/>
                <div className="card-body">
                    <h4 className="card-title" style={style.Title}>{person.firstName} {person.lastName}</h4>
                </div>
                <div> 
                   <ul className="list-group list-group-flush" style={style.List}>
                        <li className="list-group-item" ><FontAwesomeIcon icon={faLocationDot}  size="sm"/>{person.city}, {person.country}</li>
                        <li className="list-group-item"><FontAwesomeIcon icon={faPhoneVolume} size="sm" />{person.phoneNumber}</li>
                        <li className="list-group-item"><FontAwesomeIcon icon={faGlobe} size="sm" />{person.website}</li>
                        <li className="list-group-item"><FontAwesomeIcon icon={faEnvelope} size="sm" />{person.email}</li>
                    </ul>
                    <button style={style.Button} onClick={editPage}>Show</button>
                </div>
                
              </div>
        
          );
        })}
      </div>
   
  );
}