How do I reset a screens state to its initial state when using react navigation?

I want to reset the state (back to initial state) in a functional component when navigated via navigation.navigate().

Say a user navigates to an A screen and some state is set, then they click a button on that screen and navigate to a B screen via navigation.navigate('B);`

The problem Im having appears when the user clicks another button to go back to the A screen (again via navigation.navigate('A');). The A component at this point is still holding all the state from its initial mount. I want the state to be reset to the initial state for the A component so users have to start whatever process over again from the beginning.

Is there a way to accomplish this? I attempted some half measure of listening for that navigation back and resetting the state with a bunch of set hooks, but it feels wrong and does not work very well.

Edit:
Someone asked for a code sample, so a quick example is below. The problem is; if someone navigates to component A and clicks the button that calls setInput which makes text appear above the buttons, they then click the other button labeled Go To B which react navigation takes them to component B. If they then proceed and click Go To A and are then navigated back to component A, component A will still have the input state equal to Hello. I want it to be reset back to an empty string (hopefully without having to call setInput("").

import React, { useState } from "react";import {Center, Button, Text} from "native-base";const A = ({ route, navigation }) => {  const [input, setInput] = useState("");  return (<Center><Text>{input}</Text><Button onPress=(() => { setInput("Hello") })>Click Me For Words</Button><Button onPress=(() => { navigation.navigate("B") })>Go To B</Button></Center>  );};const B = ({ route, navigation }) => {  return (<Center><Button onPress=(() => { navigation.navigate("A") })>Go To A</Button></Center>  );};