Make any keyboard design in Framer interactive, using the text on the button as input onTap

Keyboard.ts

import { Override, Data } from "framer";

const app = Data({ Text: "" });

export const Input: Override = props => {
  return {
    text: app.Text.length > 0 ? app.Text : "Type something...",
    opacity: app.Text.length > 0 ? 1 : 0.6
  };
};

export const Button: Override = props => {
  return {
    onTap: e => {
      app.Text += e.target.innerText || "";
    }
  };
};

export const ClearInput: Override = props => ({
  onTap: () => (app.Text = "")
});

export const SpaceBar: Override = props => ({
  onTap: () => (app.Text += " ")
});

export const Delete: Override = props => ({
  onTap: () => (app.Text = app.Text.substr(0, app.Text.length - 1))
});