reading value from custom element while submitting in react js

I have custom component which I am importing in my another Component as a Element tag. My custom Component consist of dropdown values. I want to read value the value of in my element tag when I submit my form

custom component :

import React, { useState, useMemo } from 'react'
import Select from 'react-select'
import countryList from 'react-select-country-list'

function CountrySelector() {
  const [value, setValue] = useState('')
  const options = useMemo(() => countryList().getData(), [])

  const changeHandler = value => {
    setValue(value)
  }

  return <Select options={options} value={value} onChange={changeHandler} />
}

export default CountrySelector

i want to use that custom component country selector values on my submit button:

main component:

import react from 'react';
import CountrySelector from '../../helpers/CountrySelector';
import IdType from '../../helpers/IdType';
import ProofOfAddress from '../../helpers/ProofOfAddress';

const submitForm=(e)=>{
    //debugger;
e.preventDefault();
console.warn(e.target)
};


const IdentityVerification = (props) => {
    const saveUser=(e)=>{
        console.warn({e});
    }
    return (
      <form onSubmit={submitForm} > 
        <div className='app'>
        <label >Choose Issuing Country/region</label>
          <CountrySelector/>
          <label >Select ID Type</label>
          <IdType/>
          <label >Proof of Address</label>
          <ProofOfAddress/>
        </div>
        <div className="form-actions">
          <button >Submit</button>
          
        </div>
      </form>
    );
  };
  
  export default IdentityVerification;

how can i read values?

Answer

The normal way to handle this would be to move the state and your changeHandler function into the parent component and pass the handler down to the child as a prop.

const IdentityVerification = (props) => {
   const [value, setValue] = useState('')
   const changeHandler = value => {
     setValue(value)
   }
   return (
        // ...

        <CountrySelector onChange={changeHandler}/>

       // ...
);

and in your child:

function CountrySelector({changeHandler}) {
  // .... 
  return <Select options={options} value={value} onChange={changeHandler} />
}