Fetching data with input parameter with SWR Hook

Question

function DayOne() {
  const [country, setCountry] = useState("");
  const url = `${process.env.REACT_APP_BASE_URL}/dayone/all/total/country/${country}`;
  const { data, error } = useSWR(url, fetcher);
  let value = useRef("");

  const onClick = async (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    return setCountry(value.current);
  };

  const onChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    value.current = e.target.value;
  };

  let index = 1;
  if (error) return <div>failed to load</div>;
  if (!data) return <Loading />;
  const { name } = data;
  return (
    <div>
      {console.log(data)}
      <ContainerComp>
        <NavBar />
        {console.log(country)}

        <InputCountryForm myRef={value} onChange={onChange} onClick={onClick} />
        <div>{country}</div>
        {name &&
          name.map((n: IDayOne) => {
            <CustomCard icon={""} title={country} value={n.Active} />;
          })}
      </ContainerComp>
    </div>
  );
}

export default DayOne;

the fetcher

export const fetcher = (url: string) => fetch(url).then((res) => res.json());

Im trying to display a card list with values coming after picking a country a submitting to the endpoint. How can i improve this and actually make it work ?