I have this so far but need it in an arrow function on an existing form that is using react-hook-form and gatsby-plugin-intl

The form should be in the format below where I am also using useState for submission.

The code is checking for the value of the option selected to display a conditional field / I think I will need to use the watch API for this field, but first need to include the into the complete form.

```
   const ContactForm = ({ intl }) => {

   const [submitted, setSubmitted] = useState(false)

   [...]     }

```

As opposed to

```

https://codesandbox.io/s/cocky-oskar-o2m6c

   class SelectOptions extends React.Component {
     constructor(props) {
       super(props)
       this.state = {
         fruit: 'Apple',
       }
       this.handleChange = this.handleChange.bind(this)
     }
     handleChange(e) {
       this.setState({ fruit: e.target.value })
     }

     render() {
       const isComplaint = this.state.fruit
       let complaint
       if (isComplaint === 'Strawberry') {
         complaint = <div>How Are You Doing?</div>
       } else {
         complaint = <div></div>
       }
       return (
         <div className='mt-10'>
           SELECT ONE
           <div className='mt-2'>
             <select value={this.state.fruit} onChange={this.handleChange}>
               <option value='apple'>Apple</option>
               <option value='Strawberry'>Strawberry</option>
               <option value='Cucumber'>Cucumber</option>
             </select>
           </div>
           {complaint}
         </div>
       )
     }
   }
   export default SelectOptions

```