I am using Ant Design to create a cascading dropdown. I am looking to return the selected value as a tag to display something like "You selected {name}". How can I bind the selected value to the h1 tag? Here is the code so far:

    const options = [
      {
        value: 'Person',
        label: 'person',
        children: [
          {
            value: 'amy',
            label: 'Amy',
          },
          {
           value: 'john',
           label: 'John'
          }
        ],
      }
    ];
    
    function onChange(value, selectedOptions) {
      console.log(value, selectedOptions);
    }
    
    function filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    }  
    
    class CascadingDropdown extends Component{
      render(){
            return(
                <div>
                    <p>Please select a person:</p>
                  <div>
                  <Cascader
                      options={options}
                      onChange={onChange}
                      placeholder="Please select"
                      showSearch={{ filter }}
                      onSearch={value => console.log(value)}
                    />
                  </div>
                  <h1>You selected {name}</h1> // here is where I want to print the name
                </div>
            );
        }
    }
    
    export default CascadingDropdown;