React Animated Cursor – Update Cursor With State

I am trying to utilize the npm package react-animated-cursor to make a custom cursor that changes when it is hovered over certain items.

From what I can tell, it seems like that package is set up to allow custom cursor html, however it’s not updating the cursor html when the state is changed.

Am I doing something wrong or is there another way I can accomplish what I need?

import AnimatedCursor from "react-animated-cursor";
const [value, setValue] = useState("default");

<AnimatedCursor> {value} </AnimatedCursor>
<div
  style={{
          backgroundColor: "blue",
          color: "white",
          textAlign: "center",
          width: "100%",
          height: 300,
   }}
   onMouseOver={() => setValue("in")}
   onMouseOut={() => setValue("out")}
>
   {value}
</div>

CodeSandbox

Expected Behavoir: When hovered on the blue background the cursor should have the text “in”. When the cursor leaves the color section it should have the text “out”