React Toastify not rendering

Question

I want to add react toastify to my react vite application and I am encountering error related to useSyncExternalStore. I have tried to use version 9 of react toastify but the issue still display in the console. I am using react 18.2.0. Here is my main.tsx file.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ErrorBoundary from '../src/ErrorBoundary';
import './index.css';
import { ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';

ReactDOM.render(
  <React.StrictMode>
    <ErrorBoundary>
      <App />
      <ToastContainer />
    </ErrorBoundary>
  </React.StrictMode>,
  document.getElementById('root')
);

package.json file

{
  "name": "orm-frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "build:css": "postcss src/styles/tailwind.css -o src/index.css",
    "watch": "postcss src/styles/tailwind.css -o src/index.css --watch",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.15.1",
    "@mui/material": "^5.15.1",
    "@nivo/bar": "^0.84.0",
    "@nivo/core": "^0.84.0",
    "@nivo/pie": "^0.84.0",
    "autoprefixer": "^10.4.16",
    "axios": "^1.6.6",
    "chart.js": "^4.4.1",
    "postcss-cli": "^10.1.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-circular-progressbar": "^2.1.0",
    "react-dom": "^17.0.2",
    "react-icons": "^4.12.0",
    "react-router-dom": "^6.21.1",
    "react-toastify": "^10.0.4",
    "recharts": "^2.10.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
    "@types/react-toastify": "^4.1.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

Handle Registration method on click of submit

import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const handleRegistration = async () => {
    try {
      const response = await RegisterUser(data);
      console.log("Registration successful:", response.data);
      if (response.status === true) {
        console.log("hello");
        toast.success("Registration successful");
      }
      
    } catch (error) {
      console.error("Registration failed:", error);
      
    } 
  };