useContext not working when calling component from another component that is having useContext

Question

The problem I am facing is:-

In my home page component, I have my code like:-

const { portfolios, getPortfolios } = useContext(PortfolioContext);
  
useEffect(() => {getPortfolios()}, []);

return (...)

When calling this component it works just fine, e.g. like when landing on home page all the portfolios are displayed correctly that means I get my portfolios and getPortfolios function from Context API
Also when I land on the home page from link (using react-router-dom), there is no problem

But, when coming from a page that shows details of the portfolio using a slug, code:-

const { slug } = useParams();
const { portfolios, getPortfolioFromSlug } = useContext(PortfolioContext);
  
useEffect(() => {getPortfolioFromSlug(slug)}, []);

return (...)

I still get my portfolio details correctly using the slug

But now, if I go from this portfolio details page to my home page (Both having the Context API) by clicking any of the links that use react-router-dom (e.g. from Navbar component), I get errors on console and nothing is displayed on the screen.

The errors I get are:-

Uncaught TypeError: portfolios.map is not a function
    at Portfolio (Portfolio.js:15:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

The above error occurred in the <Portfolio> component:

    at Portfolio (http://localhost:3000/static/js/bundle.js:1315:56)
    at Routes (http://localhost:3000/static/js/bundle.js:49405:5)
    at main
    at Router (http://localhost:3000/static/js/bundle.js:49338:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:48147:5)
    at PortfolioState (http://localhost:3000/static/js/bundle.js:1588:86)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

FYR, portfolios.map is used in the home page component which is rendered correctly if we reload the page after getting the error

The problem ONLY occurs when we get to that page from the portfolio details page

I am new to useContext and React and stuck at this problem, I tried searching for the answer everywhere but couldn't get the answer, can you please help solve the problem, Thank you!

////////////////////////EDIT///////////////////////////////////
Code for getPortfolios() and getPortfolioFromSlug() functions

const getPortfolios = async () => {
    // API Call
    const response = await fetch(`http://${host}:${port}/api/portfolios/getportfolios`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    });
    const jsonResponse = await response.json();
    setPortfolios(jsonResponse);
}

const getPortfolioFromSlug = async (slug) => {
    // API Call
    const response = await fetch(`http://${host}:${port}/api/portfolios/getportfolio/${slug}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    });
    const jsonResponse = await response.json();
    setPortfolios(jsonResponse);
}