Best practices for callback functions

Question

import { useState } from "react";
import textfield from "../components/textfield";
const cycle = () => {
  const [txt, setTxt] = useState("");
  const changeText = (val) => {
    setTxt(val);
  };
  return <textfield value={txt} changeval={changeText} />;
};

export default cycle;

const textfield = ({ val, changeval }) => {
  return (
    <input
      value={val}
      onChange={(e) => {
        changeval(e.target.value);
      }}
    />
  );
};

export default textfield;

This is a crude example of how I was taught to use a callback with child components. Is the method I use inefficient/poor practice?