React Use EmailJS for multiple step Form - reactjs

Question

I have a React multiple step form, first and second steps is to collect user's image, the third step is user's contact information, and I want to send all this by use EmailJS.
Now I set up emailJS correctly so email does get sent(only last step form), but I don't know how to keep first and second steps' content.
Here is part of my current code:
import "./main.css";
import { Stepper, StepLabel, Step } from "#mui/material";
import Step1 from "../Steps/Step1";
import Step2 from "../Steps/Step2";
import Step3 from "../Steps/Step3";
import { multiStepContext } from "../Steps/StepContext";
import { useContext } from "react";
import { QontoConnector, QontoStepIcon } from "./CustomStepper";
export default function Main(){
const {currentStep, finalData} = useContext(multiStepContext);
function showStep(step){
switch(step){
case 1 :
return <Step1 />
case 2 :
return <Step2 />
case 3 :
return <Step3 />
}
}
return(
<div className="center-steeper">
<Stepper style={{width: "90%", marginTop: "20px", marginBottom: "35px"}}
activeStep={currentStep - 1} orientation="horizontal" alternativeLabel connector={<QontoConnector />}>
<Step>
<StepLabel StepIconComponent={QontoStepIcon}></StepLabel>
</Step>
<Step>
<StepLabel StepIconComponent={QontoStepIcon}></StepLabel>
</Step>
<Step>
<StepLabel StepIconComponent={QontoStepIcon}></StepLabel>
</Step>
</Stepper>
<div>
{showStep(currentStep)}
</div>
</div>
)
}
Step 1:
export default function Step1(){
...
return(
<div className="step-container">
...
<Col span={11} className="upload" style={{ marginRight: "25px" }}>
<div className="upload-photo">
<input id="fusk" type="file" onChange={onChange} style={{display:"none"}} name="origin_pic"/>
...
</div>
</Col>
...
<Row style={{ justifyContent: "space-between"}}>
<Col span={1}></Col>
<Col span={1}>
<button className="btn-next" onClick={() => setStep(2)}>Next</button>
</Col>
</Row>
</div>
)
}
Step 2:
export default function Step2(){
...
return(
<div className="step-container">
...
<input id="fusk" type="file" onChange={onChange} style={{display:"none"}} name="focus_pic"/>
...
<TextArea
className="text-input"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Write down your concern and what you want to achieve."
autoSize={{
minRows: 7,
maxRows: 10,
}}
name="concern"
/>
<Row style={{ justifyContent: "space-between", alignSelf: "flex-start" }}>
<Col span={1}>
<button className="btn-back" onClick={() => setStep(1)}>Back</button>
</Col>
<Col span={1}>
<button className="btn-next" onClick={() => setStep(3)}>Next</button>
</Col>
</Row>
</div>
)
}
Step 3:
export default function Step3(){
const form = useRef();
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
const { setStep } = useContext(multiStepContext);
const sendEmail = (e) => {
e.preventDefault();
emailjs.sendForm('service_fc2puic', 'template_vpee0kb', form.current, '5EET8rJnlaH9MTLWH')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
};
return(
<div className="step-container">
<h2 className="step-title">Step 3: Tell us your contact information</h2>
<form
{...formItemLayout}
ref={form}
name="register"
onFinish={onFinish}
scrollToFirstError
>
...
<Input placeholder="First name" name="first_name"/>
...
<Input placeholder="Last name" name="last_name"/>
...
<Input placeholder="Email" name="email"/>
...
<Input placeholder="Email"/>
...
<Input placeholder="Phone number" name="phone_number"/>
...
<Checkbox defaultChecked={false} disabled value="In-office" name="consultation"><h3 className="option-text">In-office</h3></Checkbox>
<br />
<Checkbox defaultChecked={false} value="Receiving customized video through Email" name="consultation"><h3 className="option-text">Receiving customized video through Email</h3></Checkbox>
<br />
<Checkbox defaultChecked={false} disabled value="Facetime" name="consultation"><h3 className="option-text">Facetime</h3></Checkbox>
<br />
<Checkbox defaultChecked={false} disabled value="Whatsapp" name="consultation"><h3 className="option-text">Whatsapp</h3></Checkbox>
...
</form>
<Row style={{ justifyContent: "space-between", alignSelf: "flex-start" }}>
<Col span={1}>
<button className="btn-back" onClick={() => setStep(2)}>Back</button>
</Col>
<Col span={1}>
<button className="btn-next btn-submit" onClick={sendEmail}>Submit</button>
</Col>
</Row>
</div>
)
}