How to convert Class component to function on react

I have a customer feedback page or rather a contact page. There are a few in there. The page is written in JavaScript, React in the class component. I want to convert it to a functional component.

Below I will throw source code off the page

import React, { Component } from "react";
import { Button, Form, FormGroup, Label, Input, FormText } from "reactstrap";
import axios from "axios";

class Contacts extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
      email: "",
      subject: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
    //console.log(`${e.target.name}:${e.target.value}`);
  };
  async handleSubmit(e) {
    e.preventDefault();
    const { name, email, subject } = this.state;
    const form = await axios.post("/api/form", {
      name,
      email,
      subject
    });
  }

  render() {
    return (
      <Form className="col-xs-12 col-md-6" onSubmit={this.handleSubmit}>
        <FormGroup>
          <Label for="name">name:</Label>
          <Input type="text" name="name" onChange={this.handleChange} />
        </FormGroup>
        <FormGroup>
          <Label for="exampleEmail">Email:</Label>
          <Input type="email" name="email" onChange={this.handleChange} />
        </FormGroup>
        <FormGroup>
          <Label for="subject">Subject:</Label>
          <Input type="textarea" name="subject" onChange={this.handleChange} />
        </FormGroup>
        <Button>Submit</Button>
      </Form>
    );
  }
}

export default Contacts;

>Solution :

const Contacts = (props) => {
    const [name, setName] = useState();
    const [email, setEmail] = useState();
    const [subject, setSubject] = useState();

    const handleChange = useCallback((setState, event) => {
        setState(event.target.value);
    }, []);
    
    const handleSubmit = useCallback(async () => {
        const response = await axios.post("/api/form", {
            name,
            email,
            subject
        });
        console.log(response)
    }, [name, email, subject]);


    return (
        <Form className="col-xs-12 col-md-6" onSubmit={handleSubmit}>
            <FormGroup>
                <Label for="name">name:</Label>
                <Input type="text" name="name" onChange={handleChange.bind(null, setName)} />
            </FormGroup>
            <FormGroup>
                <Label for="exampleEmail">Email:</Label>
                <Input type="email" name="email" onChange={handleChange.bind(null, setEmail)} />
            </FormGroup>
            <FormGroup>
                <Label for="subject">Subject:</Label>
                <Input type="textarea" name="subject" onChange={handleChange.bind(null, setSubject)} />
            </FormGroup>
            <Button>Submit</Button>
        </Form>
    );
    
}