How to share and change state between components using props

Form.js

// Child

import React, { useState, Component } from 'react';
import Input from '../../shared/input-box/InputBox'

const Form = function (props) {

    const {toggle, toggler} = props;

    const [value, setValue] = useState('');

    const onchange = (data) => {
        setValue(data)
        console.log("Form>", data);
    }

    const togller = () => {
        toggler();
    }

    console.log(toggle);

    return (
        <div>
            <Input data={value} onchange={(e) => { onchange(e) }}/>

            <a onClick={togller}>state: {toggle}</a>
        </div>
    );
}
export default Form;

Main.js

// Parent

import React, { Component } from 'react';

import Form from './form/Form'

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'React Test App',
            toggle: true
        };
    }

    handleToggler = () => {
        if(this.state.toggle) this.setState({toggle: false})
        if(!this.state.toggle) this.setState({toggle: true})

        console.log(this.state.toggle);
    }

    render() {
        return (
            <div>
                <h2>{this.state.name}</h2>
                
                <Form toggle={this.state.toggle} toggler={this.handleToggler} />
            </div>
        );
    }
}