text: import { useEffect, useState } from "react";
  function InputComponent(prop) {
    const [searchQuery, setSearchQuery] = useState("");
    var inputObject = {
      name: prop.name,
      value: 0,
    };
    const handleChange = (e) => {
      setSearchQuery(e.target.value);
    };
  
    useEffect(() => {
      inputObject.value = searchQuery;
      prop.onTextInputChange(inputObject);
    }, [searchQuery]);
  
    return (
      <div style={container}>
        <input
          placeholder="Type value..."
          type="text"
          value={searchQuery}
          onChange={handleChange}
          defaultValue={prop.defaultValue}
        />
        <span style={spanDescription}>{prop.description}</span>
      </div>
    );
  }
  
  const container = {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    height: "7vh",
    width: "80vh",
    borderRadius: 10,
    marginTop: 20,
    paddingLeft: 20,
    backgroundColor: "#90BF90",
  };
  
  const spanDescription = {
    paddingLeft: 20,
  };
  
  export default InputComponent;
  