How to do Smooth Font Weight Change Hover Effect using Tailwind CSS and React

Question

I came across the website Le Fruit Studio and was really impressed by the hover effect they have on their title. When I hover over the title, the font weight changes smoothly.

Their hover effect

I've been trying to replicate this effect using Tailwind CSS and React, but I can't seem to do it. How was this achieved? and can you do this using React + Tailwind?

I've tried using the hover:font-weight utility class in Tailwind CSS but I'm not able to achieve the same level of smoothness.

My working replication, but not smooth

I tried using the useState hook in React, but it doesn't work either.

import React, { useState } from 'react';

const TextHover = () => {
  const [fontWeight, setFontWeight] = useState(100);

  const handleMouseEnter = () => {
    const start = 100;
    const end = 900;
  
    for (let i = start; i <= end; i++) {
      setFontWeight(i);
      console.log(i)
    }
  };

  const handleMouseLeave = () => {
    const start = 900;
    const end = 100;
    for (let i = start; i >= end; i--) {
        setFontWeight(i);
        console.log(i)
      }
  };

  return (
    <div className="flex items-center justify-center h-screen">
      <h1
        className={`text-lg transition font-roboto text-10xl font-[${fontWeight}]`}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        Hover me!
      </h1>
    </div>
  );
};

export default TextHover;