Merhaba,
useState e default değer girince hata alıyorum, boş bırakınca problem yok çalışıyor ama default değer girmeliyim ki butona basmadan da sayfa yüklenince listeden bir tanesi gösterilsin boş kalmasın sayfa..
Aşağıda görüldüğü üzere activeTabs değerine göre ul list döndürecek. Hangisine tıklandıysa o liste basılacak ekrana.

7, 61 ve 73. satırlar

import { useEffect, useState } from "react";
import styled from "styled-components";
import { useParams } from "react-router-dom";
import React from "react";
function Recipe() {
  const [details, setDetails] = useState([]);
  const [activeTabs, setActiveTabs] = useState("ingredients");
  const params = useParams();
  const getDetails = async () => {
    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": process.env.REACT_APP_MEAL_RECIPE_API_KEY,
        "X-RapidAPI-Host": "food-recipe-api.p.rapidapi.com",
      },
    };
    setDetails([]);
    await fetch(
      `https://${process.env.REACT_APP_MEAL_RECIPE_API_HOST}/recipe/${params.id}`,
      options
    )
      .then((response) => response.json())
      .then((response) => {
        setDetails(response[0]);
        console.log(response[0]);
      });
  };
  useEffect(() => {
    getDetails();
  }, [params.id]);
  return (
    <DetailWrapper>
      <div>
        <div>
        
          <h2>{details.title}</h2>
        </div>
        <img src={details.img} alt={details.title} />
      </div>
      <Info>
        <div>
    
          <Button
            className={activeTabs === "instructions" ? "active" : ""}
            onClick={() => setActiveTabs("instructions")}
          >
            Instructions
          </Button>
        </div>
        <div>

          <Button
            className={activeTabs === "ingredients" ? "active" : ""}
            onClick={() => setActiveTabs("ingredients")}
          >
            Ingredients
          </Button>
        </div>
        <div>
          <ul>
            {activeTabs === "ingredients" &&
              details.ingredients.map((ingredient) => (
                <li>
                  {ingredient.amount +
                    " " +
                    ingredient.ingredientValue +
                    " " +
                    ingredient.ingredientKey}
                </li>
              ))}
          </ul>
          <ul>
            {activeTabs === "instructions" &&
              details.descriptionSteps.map((steps) => (
                <li key={steps.step}>{steps.description}</li>
              ))}
          </ul>
        </div>
      </Info>
    </DetailWrapper>
  );
}

export default Recipe;