Bad rendering result of Safari when components including blur & gradient styles

I'm trying to do someting like this:

It's a glowing spot follows the pointer

import { useEffect, useState } from "react";
import "./styles.css";

const CUBE_SIZE = 100;

export default function App() {
  const [left, setLeft] = useState(window.innerWidth / 2);
  const [top, setTop] = useState(window.innerHeight / 2);

  const mouseMoveHandler = (event) => {
    setLeft(`${event.clientX - CUBE_SIZE / 2}px`);
    setTop(`${event.clientY - CUBE_SIZE / 2}px`);
  };

  useEffect(() => {
    document.addEventListener("mousemove", mouseMoveHandler);
    return () => {
      document.removeEventListener("mousemove", mouseMoveHandler);
    };
  }, []);

  return (
    <div className="App">
      <div
        style={{ width: `${CUBE_SIZE}px`, height: `${CUBE_SIZE}px`, left, top }}
        className="glowing-cube"
      />
    </div>
  );
}

body {
  background-color: black;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.glowing-cube {
  position: relative;
  background: linear-gradient(216.89deg, #dc4b5c 6.73%, #5a53ff 81.32%);
  filter: blur(32px);
  border-radius: 31px;
  transform: rotate(135deg);
}

The codesandbox link is below:

https://7h7cpj.csb.app/

Everything looks perfect in Chrome, while it looks bad on Safari:

I found blur is supported since Safari 6 ref
Then what's the problem?
And, how can I do to improve this?
Is there a feasible solution on Safari?