Reactjs useRef.current.value 为空值

这是react 代码

import React, { useRef, useState, useEffect } from 'react';
import "./User.css"
export default function User() {

    const objArray = [
        {
            class: "fa fa-envelope",
            title: "Gmail",
            color: "red"
        },
        {
            class: "fa fa-facebook",
            title: "Facebook",
            color: "blue"
        },
        {
            class: "fa fa-instagram",
            title: "Instagram",
            color: "#E4405F"
        },
    ];

    const link = useRef(null);


    //  * saving data a firebase;

    const handleSave = (className, title, color) => {
        const newLink = link.current.value;
        console.log("this is -> ", className, title, color, newLink);
    };
    return (
        <main className="User_main">

            <h1>~ Customization ~</h1>
            <h2>Profile Section</h2>
            <br />
            <h2 style={{ marginBottom: "0px" }} > ~ Add Social Media Icons ~ </h2>
            <small>Click and add the social media links</small>
            <br /><br />
            <div className="socialIcons">

                {
                    objArray.map((e) => {
                        return (
                            <>
                                <div>
                                    <i style={{ color: `${e.color}`, border: "1px solid " }} className={e.class} />
                                    <h4>{e.title}</h4>
                                    <input ref={link} placeholder="Enter link here" type="url" />
                                    <br />
                                    <button onClick={() => { handleSave(e.class, e.title, e.color) }}>Save</button>
                                </div>
                            </>
                        )
                    })
                }

            </div>
        </main>
    )
}

在此代码console.log("this is -> ", className, title, color, newLink)中，newLink为空.

我怎么才能解决这个问题呢？