So I'm trying to style data from my rendered react components and have the following Issue.

I think my issue is "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:" but I'm unable to fix this.

import {useEffect, useState} from "react";
import React from 'react'
import styled from 'styled-components';
import ButtonUnstyled from '@mui/base/ButtonUnstyled';
// import { Title } from '../MainElements';
const API_BASE = "http://localhost:3001";


export const RocketCard = () => {
  const [rockets, setRockets] = useState([{
    name: '',
    id: ''
  }])

  useEffect(() => {
      fetch(API_BASE + '/rockets')
        .then(res => res.json())
        .then(data => setRockets(data))
        .catch((err) => console.error("Error: ", err));
    },[])


  return ( <div className="container">
  
    <Title>Test</Title>
    {rockets.map(rocket =>
    <div className="rocket" key={rocket._id} >
      <h1>{rocket.name}</h1>
    </div>
    )}
  </div>
);

}

const Title = styled.h1`
display: flex;
align-items: center;
line-height: 1.2;
`;

Console Errors