In the below example, when i update the range input, my grid-template-columns doesn't update even though the {cellWidth} variable updates in the jsx. I've tried this on a smaller scale with just an input and the width and it works perfectly.

  const [cellWidth, setCellWidth] = useState("40");

  return (
    <main className="grid grid-cols-[250px,1fr] h-[100dvh]">
      <div className="bg-[#F5F5F5] px-3 py-3 gap-4 flex flex-col">
        <div className="grid grid-cols-[30px,1fr] gap-2">
          <div className="size-[30px] rounded-lg bg-gradient-to-bl from-blue-300 to-blue-400"></div>
          <div className="flex justify-between flex-col">
            <div className="text-sm leading-none">Court King</div>
            <div className="text-gray-400 text-xs leading-none">

            </div>
          </div>
        </div>
        <div className="flex flex-col gap-0.5">
          <Button>
            <Plus className="size-4" /> Add booking
          </Button>
          <Button variant={"ghost"}>
            <Search className="size-4" /> Search
          </Button>
          <Button variant={"ghost"}>
            <Cog className="size-4" /> Settings
          </Button>
        </div>
      </div>
      <div className="grid grid-rows-[max-content,1fr] shadow-md">
        <header className="py-5 px-5 text-xl space-x-1 bg-[#FAFAFA]">
          <span className="font-bold">April 1</span>
          <span className="font-light text-slate-400">2024</span>
          <input
            type="range"
            min={20}
            max={100}
            value={cellWidth}
            onChange={(e) => setCellWidth(e.target.value)}
          />
          {cellWidth}
        </header>
        <div
          style={{
            gridTemplateColumns: `max-content repeat(96,${cellWidth}px);`,
          }}
          className="grid bg-[#FAFAFA] no-scrollbar h-max overflow-x-scroll"
        >