I am trying to fetch data from airtable base and displaying it on client side, the table contains following columns:-

Id, name, formatted_address, cross_street, voting and imageURL.

I am able to display id name image and voting on the client side but formatted_address and cross_street is undefined on the client side but the data is displayed on the server side in Next.js app.

const CoffeeStore = (initialProps) => {
  const router = useRouter();

  const id = router.query.id;

  const [coffeeStore, setCoffeeStore] = useState(initialProps.coffeeStore);

  const {
    state: { coffeeStores },
  } = useContext(StoreContext);

  useEffect(() => {
    if (isEmpty(initialProps.coffeeStore)) {
      if (coffeeStores.length > 0) {
        const coffeeStoreFromContext = coffeeStores.find((coffeeStore) => {
          return coffeeStore.fsq_id.toString() === id; //dynamic id
        });

        if (coffeeStoreFromContext) {
          setCoffeeStore(coffeeStoreFromContext);
        }
      }
    }
  }, [id, initialProps.coffeeStore]);

  const { data, error } = useSWR(`/api/getStoreById?id=${id}`, fetcher);

  useEffect(() => {
    if (data && data.length > 0) {
      console.log("SWR DATA>>>>", data[0]);
      setCoffeeStore(data[0]);
      setVotingCount(data[0].voting);
    }
  }, [data]);

  const {
    name,
    imageURL,
    location: { formatted_address } = "NA",
    location: { cross_street } = "NA",
  } = coffeeStore;

  console.log("COffee STore>>>", coffeeStore);

formatted_address and cross_street is undefined on client side but is displayed on server side.

  console.log(
    id,
    name,
    formatted_address,
    cross_street,
    imageURL
  );
};

export default CoffeeStore;