So i've been trying to show an image on my page with an API, but everytime I go to the page I see the image for a few seconds and after that the page refreshes and it shows an error:

Uncaught TypeError: location is undefined

I think the problem could be about the way I used my image, but i am not sure. If I console log the image it just shows the correct image name. This is the code I used:

import { Row, Col } from "react-grid-system";
import { Separator } from "@fluentui/react";
import * as React from "react";
import { useEffect, useState } from "react";

function Recipe(props) {

  const axios = require('axios');
  const api = axios.create({
    baseURL: 'http://localhost:5000/',
    timeout: 10000
  })
  const [recipe, setRecipe] = useState({});
  const [image, setImage] = useState({});

  useEffect(() => {
    getRecipe()

  }, [])

  function getRecipe() {
    api.get('/recipe/' + props.id).then(res => {
      setRecipe(res.data);
      setImage("https://localhost:5001/Uploads/" + res.data.image)
    });
  }

  return (
    <div>
      <div>
        <Row>
          <Col sm={6} md={6} lg={6}>
            <img style={{ width: "700px", marginTop: "20px" }} src={image} alt={"error"} />
          </Col>

          <Col style={{ marginTop: "20px" }} sm={6} md={6} lg={6}>
            <Separator className={"Separator"} />
            <h1>Naam: <div style={{ fontSize: "20px" }}>{recipe.name}</div></h1>
            <h1>Ingredienten: <div style={{ fontSize: "20px" }}> {recipe.ingredients}</div>
            </h1>
            <h1>Macro's:
              <div style={{ fontSize: "20px" }}>
                <ul>
                  <li>Kcal: {recipe.carbs}</li>
                </ul>
              </div>
            </h1>
            <h1>Voorbereiding: <div style={{ fontSize: "12px" }}>

              {recipe.preparation} </div></h1>

          </Col>

        </Row>

      </div>

    </div>
  )
}
export default Recipe