bad react code

accounts.tsx

import Input from '../components/input'
import * as React from 'react'

class AccountForm extends React.Component {
    name: any;

    constructor(props: any) {
        super(props);
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleAccountSave = this.handleAccountSave.bind(this);
        let name = localStorage.getItem("accounts")
        this.name = name
    }

    handleNameChange(value: any) {
        this.name = value;
    }

    handleAccountSave() {
        const account = this.name
        localStorage.setItem("accounts", account)
    }

    render() {
        return (
            <form>
                <Input
                    onChange={this.handleNameChange}
                    account={this.name}
                    name="Name"
                    placeholder="Add Account"
                    type="email"
                />
                <button
                    type="button"
                    onClick={this.handleAccountSave}
                    className="mt-2 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                    Save
                </button>
            </form>
        );
    }
};

export default AccountForm;

input.tsx

export default function Input(props: any) {
    function handleChange(event: { target: { value: any; }; }): void {
        props.onChange(event.target.value);
    }
    return (
        <div>
            <label htmlFor="{props.name}" className="block text-xs font-medium text-gray-900">
                {props.name}
            </label>
            <div className="mt-1">
                <input
                    type={props.type}
                    name={props.name}
                    value={props.value}
                    id={props.name}
                    onChange={handleChange}
                    className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
                    placeholder={props.placeholder}
                />
            </div>
        </div>
    )
}