How to have a react-hook-form input whose data is supplied via React Navigation route params? - react-navigation

Question

I'm gradually adopting react-hook-form to control a form screen I wrote with custom input components. For the most part, adoption has been relatively smooth using this paradigm:
const {control, handleSubmit, watch, formState: {errors}} = useForm<FormData>();
<Controller
name='myInput'
control={control}
rules={
//some validation rules with custom messages
}
render={({ field: { onChange, value } }) => (
<MyCustomComponent
onChange={onChange}
value={value}
/>
)}
...
/>
{errors.myInput && <Text>{error.myInput.message}</Text>}
However, I have this one element on my form page that looks like an input but is really a button that displays text based upon the route.params passed to my form screen, all of which works via the React Navigation library. The button itself actually just brings up a modal where the user selects "topics", once the user makes their topics selections and clicks a select button on the modal, this triggers navigating back to my forms screen while passing these selected topics back to it, which then updates the display text on the button. Kinda like this:
Form Screen:
export default function FormScreen({ navigation, route }: FormScreenProps) {
const [topics, setTopics] = React.useState<string[]>(route.params.topics);
React.useEffect(() => {
setTopics(route.params.topics);
}, [route.params.topics]);
return (
<SelectTopicsButton
selectedTopics={topics} // This sets the display text of the button
onPress={ // bring up Select Topics Modal }
/>
);
}
In the select topics modal, the only code that matters is that there is a button to dismiss the modal and return to the Form Screen that contains the following:
onPress={() => { navigation.navigate('FormScreen', { topics: selectedTopics }); }}
Ultimately in the form I submit I would like to have a field topics that is managed by react-hook-form so that I can have something like the following in my form screen like I've done with all my other inputs which can have some "You must select at least 1 topic" type validation:
<SelectTopicsButton
selectedTopics={topics} // This sets the display text of the button
onPress={ // bring up Select Topics Modal }
/>
{errors.topics && <Text>{errors.topics.message}</Text>}
Since it isn't an input, it doesn't make sense to wrap it with a Controller object, but I still want to manage its state with react-hook-form. Any suggestions in how to wire this up and achieve this are greatly appreciated, thanks!