custom Mouse with javascript

import React, { createContext, useState } from "react";

export const CursorContext = createContext();

const CursorContextProvider = (props) => {
  const [cursor, setCursor] = useState({ active: false });

  return (
    <CursorContext.Provider value={[cursor, setCursor]}>
      {props.children}
    </CursorContext.Provider>
  );
};

export default CursorContextProvider;

import React from "react";
import useMousePosition from "./useMousePosition";
const Cursor = ({ color, color1, scroll, left, right, drag, pos }) => {
  const { clientX, clientY } = useMousePosition();

  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 9999,
        pointerEvents: "none",
      }}
    >
      <svg
        width={500}
        height={500}
        viewBox="0 0 50 50"
        xmlns="http://www.w3.org/2000/svg"
        style={{
          position: "absolute",
          transform: "translate(-50%, -50%)",
          color: '#000',
        }}
      >
        <circle
          cx="25"
          cy="25"
          r="7.5"
          fill={ "#000"  }
          id="cursor"
        />
      </svg>
    </div>
  );
};
export default Cursor;

        <CursorContextProvider>
          <Cursor
          />
          {props.children}
         <div>
           mouse shape
        </div>
        </CursorContextProvider>