Persist previous state value after re render uing react useRef() hooks

useRef.jsx

export default function UseRef() {
    const [name, setName] = useState('');
    const renderCount = useRef(1);
    const prevName = useRef('');

    useEffect(() => {
        renderCount.current = renderCount.current + 1
        prevName.current = name;
    })

    return(<>
        <input type="text" onChange={(e) => setName(e.target.value)} />
        <p>My name is {name} </p>
        <p>I got rendered {renderCount.current} times</p>
        <p>My name is now {name} but I used to be {prevName.current} </p>
    </>)    
}