In the fourth component you can have a handleNameChange(newName) prop to lift the state up.

const FourthComponent = (
  name: string,
  handleNameChanged: (newName: string) => void
) = {
  const onNameChanged = (newName: string) => handleNameChanged(newName)
}

Same in third and second components to lift up in the same way.

Finally, in the first one you will have something like :

const FirstComponent = () => {
  const [name, setName] = useState<string>('')

  <SecondComponent
    name={name}
    handleNameChange={(name) => setNAme(name)}
  />
}

In a case you want to pass a variable to a parent, you just pass it via a prop function:

const Parent = () => {
    const [var, setVar] = useState();

    useEffect(() => {
        console.log(`${var} in parent`);

    return (
        <Child passVarToParent={setVar} />
    );
}

const Child = (props) => {
    return (
        <input /* ... */ onChange={(e) => props.passVarToParent(e.target.value)} />
    );
}

However, in case of parent-child-chaining, I'd go with some state management like Redux, MobX or React Context.

You can do this by passing setName as a prop from the First component to the Fourth

const First = () => {
  const [name, setName] = useState();
  return (
    <div>
      {name}
      <Second setFirstName={(name) => setName(name)} />
    </div>
  );
}

const Second = ({ setFirstName }) => {
  return (
   <div>
     <Third setFirstName={setFirstName}/>
   </div>)
}

const Third = ({ setFirstName }) => {
 return (
  <div>
    <Fourth setFirstName={setFirstName}/>
  </div>
 )
}

const Fourth = ({ setFirstName }) => {
 return (
   <div>
     <div onClick={() => setFirstName('Test Name')}>Press to set Name</div>
   </div>
 )
}