Как сделать переадресацию и после этого отрендерить компонент?

Есть компонент:

export default function App() {
   return (
     <Router>
        <div className='App'>
           <a href='/'>Show protected information if</a>
           <span>&nbsp;</span>
           <input id="data" size="5"></input> is odd
        </div>
        <Switch>
           <Route path='/protected' component={Data}></Route>
        </Switch>
     </Router>
}

const Data = () => {
  let numb = document.getElementById('data').value;
  if (numb % 2 == 0) {
    return (
      <div>Some protected information</div>
    );
  }
}

Я пытался сделать так, но numb равно null. Не уверен, но это наверно из-за того, что я пытаюсь отрисовать компонент Data, когда ещё нет App. Как можно правильно получить значения из инпута, чтоб потом в зависимости от значения использовать Redirect?