I'm currently writing an article on this, but I'd recommend doing it through context:

const ServiceContext = React.createContext();

const App = ({ children }) => {
  const [_state, _send, service] = useMachine(someMachine);

  return (
    <ServiceContext.Provider value={service}>
      {children}
    ServiceContext.Provider>
  );
}

// in a child...
const Child = () => {
  const service = React.useContext(ServiceContext);
  const [state, send] = useService(service);

  // ...
}

The pattern above feels pretty natural and idiomatic to React.

In this case, if you have given a pascal case naming for the text input such as function TextInput(){...} , then react will consider this as a separate component even if this is defined in the same file. This is why the state variables of the App component are not within the scope of TextInput

You can mitigate this by following either of the following approcahes,

• Make text input a normal function which returns the JSX

function textInput(){
 // the state variable 'success' and 'setSuccess' will be normally accessible here
 return(
   <div>
      <input type="text" />
   <div>
 )
}

//return for the 'App' component

return(
   <>
     {textInput()}
   </>
)

• Passing the state as props to the TextInput component

  If you follow this approach, then you can have the TextInput component in a separate file as well

//parent 'App' component

function App(){
  const [success, setSuccess] = useState(false);

  return(
    <>
       <TextInput success={success} setSuccess={setSuccess}></TextInput>
    </>
  )
}

function TextInput(props){
   const {success, setSuccess} = props;
   
   // In here you can refer success and setSuccess normally as you would even if this is in a separate file
}