Next.js not showing data on page/component after getting props from getServerSideProps

Question

I'm getting data from the server with getServerSideProps:

export async function getServerSideProps(context) {
  const packageIdentifier = context.params.packageIdentifier;
  const data = await getReviewsData(packageIdentifier);

  return {
    props: {
      response: {
        packageIdentifier,
        data,
      }
    }
  };
}

Then i'm trying to load the data into a component in my page, the data appears but not showing when the page is rendered:

export default function ReviewsPage({ response }) {
  // DATA IS PRINTED TO CONSOLE AND WORKING FINE
  console.log(`Reviews Data: ${JSON.stringify(response.data)}`);
  
  const { data, setData } = useState(response.data);

  useEffect(() => {
    setData(response.data);
  }, [data]);

  return (
    <Fragment>
      <Box>
        { data && <Reviews reviews={data} /> }
        { !data && <div>There are no reviews to display.</div> }
      </Box>
    </Fragment>
  );
}

The render (return) is sending 'There are no reviews to display'. Which means that data is empty for some reason.

What am I doing wrong?