reactjs - Reach Router: Components render only on refreshing the page right after navigating using Link tag

Question

CodeSandbox https://codesandbox.io/s/billowing-hill-j5gmy?file=/src/App.js

import React from "react";
import "./App.css";
import Homepage from "./Components/Homepage";
import { Link, Router } from "@reach/router";
import Details from "./Components/Details";

function App() {
  return (
    <Router>
      <Homepage path="/" />
      <Details path="/details" />
    </Router>
  );
}

export default App;

The above is my app.js file , I am trying to navigate to details page using a Link tag in my Homepage component

import React, { Component } from "react";
import styled, { isStyledComponent } from "styled-components";
import Api from "../API/Accounts";
import { Link } from "@reach/router";

    const Homepage = () => {
    const [State] = Api("https://panorbit.in/api/users.json");

    return (
        <React.Fragment>
          <div className={"container"}>
            <div>
              <h2>Select an Account</h2>
              <div style={{ padding: 0 }}>
                {State.map((item) => (
                  <Link to={"/details"}>
                    {}
                    <img src={item.profilepicture} alt="Girl in a jacket"></img>
                    <span>{item.name}</span>
                  </Link>
                ))}
              </div>
            </div>
          </div>
        </React.Fragment>
      );
    };

    export default Homepage;

My issues is The details page dont render after navigating to /details page, Only if I refresh the page it renders properly. Please help me out, beating my head over this one for few days

UPDATE State is an Object that is returned when i call the API

import react, { useEffect, useState } from "react";
import axios from "axios";

const Api = (Api) => {
  const [data, setData] = useState([]);
  useEffect(async () => {
    const result = await axios(Api).then((x) => setData(x.data.users));
  }, []);

  return [data];
};

export default Api;