I get the selected select value through onchange, store it in state and save it in react and use it further where I need this data and everything works fine. After reloading the select value becomes the default. I don't understand how can I store the select in localstorage.

class Currency extends Component {
  constructor(props){
    super(props);
    this.state = {
      currencies: ["$ USD", "€ EURO"],
    }
  }
    
    componentDidMount = async () =>{
      const response = await client.query({
        query: Currency_Query
      })
      this.setState({
        currencies:response.data.currencies
      })
    }
    
    render() {
      return(
        <div>
          <div className={s.select}>
             <select > 
            {this.state.currencies.map((currencies) =>(
                <option>
                    <div className={s.option}>
                    {currencies.symbol} {currencies.label}
                    </div>                  
                </option>
                )
              ) 
            }
                </select> 
                
        </div>
        </div>
            )}
    }
}

export default Currency;

In app.js, through onChange, I get the values, save them in state, and then save them in localStorage

handleChange = (e) => {
    this.setState({ selectValue: e.target.value })
  }
componentDidMount(){
    this.Data = JSON.parse(localStorage.getItem('data'));
    if(localStorage.getItem('data')){
      this.setState({
        selectValue: this.Data.selectValue,

      })
    } else {
      this.setState({
      selectValue: "$ USD",
      })
    }
  }
  componentWillUpdate(nextProps, nextState){
    localStorage.setItem('data', JSON.stringify(nextState))
  }