Const Parent = () => { const

Question

Const Parent = () => { const

[state, setState] = useState(null)
const onClick = (data) => {
setState(data)
history.push('...')
}

return (
<>
<Route path={'/main'} component={() => <Main onClick={onClick} />} />
<Route path={'/main/:id'} component={() => <MainId data={state} />} />
</>
)
}

в первом компоненте по клику кладу данные в стейт родителя, который передаю во второй компонент
но там оно почему-то всегда null, в функции onClick данные точно приходят и стейт точно не пустой
скорее всего данные теряются при смене роута, вопрос - в этом ли дело, если да то как их не терять?