I have two react select dropdown and I want the second dropdown to reset and show the placeholder text. I'm setting the stet variable to null when the first dropdown changes. I'm getting the value as null in the backend code, but the value on the ui is not removed. Can some on please help me on how to reset the value in second dropdown and show the placeholder text.

I have some call back functions which will set the options for the two dropdowns. So, please ignore those for now.

import React, {Component} from 'react'
Import Select from 'react-select'

Class test extends Component{
    constructor(props){
        super(props)
        this.state={
            val1= null,
            val1_options=[],
            val2= null,
            val2_options=[]
        }
        this.handleVal1Change = this.handleVal1Change.bind(this)
        this.handleVal2Change = this.handleVal2Change.bind(this)       
      }
    }
    handleVal1Change(value1) {
    
        this.setState({
            val1: value1.value,
            val2: null,
            val2_options: null
        })
    }
    
    handleVal2Change(value2) {
        this.setState({
            val2: value2.value
        })
    }
    
    render() {
        return (
            <div>
                <Select
                    placeholder='select val1'
                    options={this.state.val1_options}
                    onChange={this.handleVal1Change}
                />
            </div>
            <div>
                <Select
                    placeholder='select val2'
                    defaultValue={this.state.val2}
                    options={this.state.val2_options}
                    onChange={this.handleVal2Change}
                />
            </div>
        
        )
    }
    
export default test