How to add image src to the state in multi step form in react via /r/reactjs

I’m making an multiStep form for my project that is inspired from Brad Traversy’s Tutorial of making Multi-Step form in React. So as per the basic structure of this form

​

structure of multi step form

I made a main Parent component called Multistep as below

import React, { Component } from 'react' import StepOne from './StepOne' export class Multiform extends Component { state={ step:1, input:'', select:'' } // Proceed to next step nextStep = () => { const { step } = this.state; this.setState({ step: step + 1 }); }; // Go back to prev step prevStep = () => { const { step } = this.state; this.setState({ step: step - 1 }); }; // Handle fields change handleChange = input => e => { this.setState({ [input]: e.target.value }); }; render() { const { step } = this.state; const { input, countryFlag, select } = this.state; const values = { input, countryFlag, select }; switch(step){ case 1: return( <StepOne nextStep={this.nextStep} handleChange={this.handleChange} values={values} /> ) } } export default Multiform 

and a child component StepOne as below

import React, { Component } from 'react' export class StepOne extends Component { continue = (e) => { e.preventDefault(); this.props.nextStep(); }; back = (e) => { e.preventDefault(); this.props.prevStep(); }; state = { countryFlag: 'https://raw.githubusercontent.com/MeRahulAhire/country-calling-code-html/master/phone_icon.png', }; render() { const selectCountryChange = () => { const img = document.querySelector('#img'); const select = document.querySelector('#country'); img.src = `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`; this.setState({ countryFlag: `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp` }); }; const { values, handleChange, } = this.props; return ( <div> <button onClick={this.back} className="col-form-prev"> <input type="email" placeholder="your-email@example.com" onChange={handleChange('input')} defaultValue={values.input} /> <div class="image" onChange={selectCountryChange}> <img src={this.state.countryFlag} id="img"/> </div> <select id="country" onChange={handleChange('select')} defaultValue={values.select}> <option data-countryCode="IN" value="91">India</option> <option data-countryCode="US" value="1">US</option> <option data-countryCode="GB" value="44">UK</option> </select> </div> ) } } export default StepOne 

according to that tutorial, everything for text input field the state management was working absolutely fine. Even when i tried to go next step and come back, the data was still accessible and persisted in that <input/> and <select/> field.

I also tried to store the image source in Multiform state but with an another onChange handler but i wasnt able to figure out exactly how to do that.

The img.src is manipulated by the selectCountryChange in stepOne as below

state = { countryFlag: 'https://raw.githubusercontent.com/MeRahulAhire/country-calling-code-html/master/phone_icon.png', }; const selectCountryChange = () => { const img = document.querySelector('#img'); const select = document.querySelector('#country'); img.src = `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`; this.setState({ countryFlag: `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp` }) <div class="image" onChange={selectCountryChange}> <img src={this.state.countryFlag} id="img"/> </div> 

Can anyone please guide me on how to add the img.src to the state of Multiform and make it persistent even when i go back and forth of the form just the <input/> and <select/>. You can also checkout my project repo for more info.