How to display the react simple keyboard only on input and also make it type and change the color of the keyboard?

Question

I want the react simple keyboard to be displayed only on input clicked otherwise it is disabled and also the keyboard is not working when clicked I also want it to work as well as change the color of the keyboard to orange and keys to peach. My code for AutoLoan.jsx, KeyBoard.jsx and KeyBoard.css are as follows:

AutoLoan.jsx

import React from "react";
import { Link } from "react-router-dom";
import KeyBoard from "../Keyboard/KeyBoard";






const AutoLoan = () => {
  
    
    
    return (
        <div className="auto">
            
            <div className="page">
                
            <h1 className="flex">
                    <i className="fa fa-car"></i>
                    Auto Loan</h1>
                    
                    <div >
                    <p className="flex-item">
                        <i className="far fa-handshake"></i>
                        <h2>Welcome to our digital account opening platform.</h2>
                    </p>
                    <p className="flex-item">
                        <i className="far fa-thumbs-up"></i>
                        <h2>Thank you for going green with us and adopting paperless way of money. </h2>
                    </p>
                    <p className="flex-item">
                        <i className="far fa-clock"></i>
                        <h2>This service also help to save time so that you have more time to do what is more important to you.</h2>
                    </p>
                </div>
                <div className="Apply">
                        <h1>Apply for Auto Loan</h1>
                    </div>
                    <hr/>
            <div className="account">
                    <p>
                        Enter Your Account Number for Auto Loan:
                    </p>
            </div>
            <form className="form">
                    
                        <input type="text" 
                        placeholder="Account Number" />
                          <KeyBoard />
                           
                         
                   
                
                </form>
                <Link to = "Form">
                <button className="Right">
                <i class="fas fa-arrow-right"></i>
                        </button>
                        </Link>
            <div className="Account">
                <h1>Don't have an account?</h1>
                
            </div>
                    <hr/>
            <div className="apply">
                    <p>Don't worry you can still apply for loan</p>
                </div>
                <Link to = "Register">
                <button className="loan">
                    Apply for Auto Loan
                    </button>
                    </Link>
                 <Link to = "/">
                <button className="back">
                <i class="fas fa-angle-double-left"></i>
                </button>
                </Link>
        </div>
    </div>               
    );
}
       
export default AutoLoan

KeyBoard.jsx

import React, { useRef, useState } from "react";
import Keyboard from "react-simple-keyboard";
import "react-simple-keyboard/build/css/index.css";
import "./KeyBoard.css"


const KeyBoard = () => {
    const [input, setInput] = useState("");
    const [layout, setLayout] = useState("default");
    const keyboard = useRef();
  
    const onChange = input => {
      setInput(input);
      console.log("Input changed", input);
    };
  
    const handleShift = () => {
      const newLayoutName = layout === "default" ? "shift" : "default";
      setLayout(newLayoutName);
    };
  
    const onKeyPress = button => {
      console.log("Button pressed", button);
  
      
       
      if (button === "{shift}" || button === "{lock}") handleShift();
    };
  
    const onChangeInput = event => {
      const input = event.target.value;
      setInput(input);
      keyboard.current.setInput(input);
    };

    return (
        <div classname = "keyboard">
        <Keyboard
        keyboardRef={r => (keyboard.current = r)}
        layoutName={layout}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
        </div>
    );
};

export default KeyBoard;

KeyBoard.css

.simple-keyboard {
    
    margin-bottom: -700px;
    background-color: #ee7600;
    
  }

The keyboard should be displayed only on input click otherwise it should be hidden and also it should be able to type. Also, the color of the keyboard should be somewhat as of the picture: I would be more than happy if someone would help me out.