how can i display a component in react js?

import React from "react";
import { useState, useEffect } from "react";
import { SignUpComponent } from "../index";
import axios from "axios";
import { Redirect, useParams } from "react-router-dom";
import { getToken } from "../../common/constants/variables";

function Reference() {
  const [openSignUp, setOpenSignup] = useState(true);
  const [status, setStatus] = useState(true);
  const [refer, setRef] = useState({});
  let { ref } = useParams();
  function toggleToSignUp() {
    setTimeout(() => {
      setOpenSignup(true);
    }, 350);
  }
  
  useEffect(() => {
    axios
    .post("https://theappsouk.com/api/v1/check-referral", {
      ref: ref,
    })
    .then((response) => {
      setStatus(response.data.status)
    });
  }, []);

  return ( //what ever the api response is it seems to render only this return statement
    <div>
        {
          status? <SignUpComponent open={openSignUp} toggleModal={toggleToSignUp} /> :
          <Redirect to= '/'/>
        }
    </div>
  );
}
export default Reference;