Неверный вызов ловушки в App.js при удалении смарт-контракта

Question

Я пытаюсь создать DApp с помощью React (только начинаю с него). У меня есть мой App.js файл с типичными инструкциями, такими как установка сети, web3, статуса контракта и т. д.

      class App extends Component {
  state = { storageValue: 0, web3: null, accounts: null, contract: null };

  componentDidMount = async () => {
    try {
      // Get network provider and web3 instance.
      const web3 = await getWeb3();
      // Use web3 to get the user's accounts.
      const accounts = await web3.eth.getAccounts();

      // Get the contract instance.
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = SimpleStorageContract.networks[networkId];
      const instance = new web3.eth.Contract(
        SimpleStorageContract.abi,
        deployedNetwork && deployedNetwork.address,
      );

      instance.options.address = "0xA65990EC0CA555d2eCDD1d84E9D1397CFA967E60"

      // Set web3, accounts, and contract to the state, and then proceed with an
      // example of interacting with the contract's methods.
      this.setState({ web3, accounts, contract: instance }, this.runExample);
    } catch (error) {
      // Catch any errors for any of the above operations.
      alert(
        `Failed to load web3, accounts, or contract. Check console for details.`,
      );
      console.error(error);
    }
  };

  runExample = async () => {
    const { accounts, contract } = this.state;

    // Stores a given value, 5 by default.
    await contract.methods.set(25).send({ from: accounts[0] });

    // Get the value from the contract to prove it worked.
    const response = await contract.methods.get().call();

    // Update state with the result.
    this.setState({ storageValue: response });
  };

  render() {
    if (!this.state.web3) {
      return <div>Loading Web3, accounts, and contract...</div>;
    }
    return (
      <div className="App">
        <Router>
          <Navbar />
        </Router>
      </div>
    );
  }
}

export default App;

Теперь внутри render()функция (последняя часть файла) Я программирую свой интерфейс для веб-сайта. Когда я помещаю туда свой компонент Navbar, он не работает из-за ошибки вызова ловушки. Правильно ли я использую для размещения компонента Navbar? Моя текущая панель навигации очень проста

      const Navbar = () => {
    return (
       <Nav>
  
       </Nav> 
    );
};

export default Navbar;

и стиль навигации объявлен в другом js файл

      export const Nav = styled.nav`
    background: #000;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;

    @media screen and (max-width: 960px) {
        trasition: 0.8s all ease;
    }
`;

Почему я не могу использовать const Navbar = () => внутри <div className="App">? Может быть, глупый вопрос, но я его не понимаю.