How to set owner wallet into useState from router.query?

Question

I'm trying to set the address of a connected wallet into useState as string so that another function can use it to run it's function.

    const router = useRouter();
    const { walletAddress } = router.query;
    const [NFTs, setNFTs] = useState<OwnedNftsResponse>()
    const [owner, setOwner] = useState<String>()
  

  useEffect(() => {
    if (router.isReady) {
      setOwner(????);
      console.log(????);
    }
  }, [router.isReady]);

 useEffect( () => {
  if (owner) {
    async function grabber() {
        const NFTs = await alchemy.nft.getNftsForOwner(owner);//Argument of type 'string | string[] | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'
      setNFTs(NFTs);
    }
    grabber();
  }  
  }, [NFTs, owner]);

Might be going about this the wrong way, so if you know a better way?

Answer 1

Here's the answer,

import { alchemy } from "const/alchemy";
import { useEffect, useState } from "react";
import { OwnedNftsResponse } from "alchemy-sdk";
import { useAddress } from "@thirdweb-dev/react";



const BagGrabber: NextPage = () => {
    const [NFTs, setNFTs] = useState<OwnedNftsResponse>()
    const owner = useAddress()



 useEffect( () => {
  if (owner) {
    async function grabber() {
        const NFTs = await alchemy.nft.getNftsForOwner(owner as unknown as string);
      setNFTs(NFTs);
    }
    console.log(NFTs);
    grabber();
  }  
  }, [owner]);