Error: Already found a plugin named 'react:Dashboard'

[GuysmoB]

Initial checklist

• [X] I understand this is a bug report and questions should be posted in the Community Forum
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

I followed this piece of code from https://uppy.io/docs/react/ Thank you for any help ! :)

import Uppy from '@uppy/core';
import Webcam from '@uppy/webcam';
import { Dashboard } from '@uppy/react';

// Don't forget the CSS: core and the UI components + plugins you are using.
import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';
import '@uppy/webcam/dist/style.min.css';

// Don’t forget to keep the Uppy instance outside of your component.
const uppy = new Uppy().use(Webcam);

function Component() {
    return <Dashboard uppy={uppy} plugins={['Webcam']} />;
}

'use client';
import Uppy from '@uppy/core';
import { Dashboard } from '@uppy/react';
import { FC, useEffect, useState } from 'react';
import Webcam from '@uppy/webcam';
import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';
import '@uppy/webcam/dist/style.min.css';

const uppy = new Uppy().use(Webcam);

const NewRenderingModal: FC<INewRenderingModal> = ({  }) => {
    return <Dashboard uppy={uppy} plugins={['Webcam']} />;
};

export default NewRenderingModal;

```
"dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@googlemaps/js-api-loader": "^1.15.2",
    "@hello-pangea/dnd": "^16.3.0",
    "@hookform/resolvers": "^3.1.0",
    "@mui/icons-material": "^5.14.3",
    "@mui/material": "^5.14.3",
    "@mui/system": "^5.12.1",
    "@mui/x-date-pickers": "^6.11.2",
    "@react-email/render": "^0.0.7",
    "@react-pdf/renderer": "^3.1.12",
    "@stripe/react-stripe-js": "^2.1.1",
    "@stripe/stripe-js": "^1.54.1",
    "@supabase/auth-helpers-nextjs": "^0.7.4",
    "@supabase/supabase-js": "^2.31.0",
    "@tanstack/react-query": "^4.29.12",
    "@tanstack/react-query-devtools": "^4.29.12",
    "@types/autosuggest-highlight": "^3.2.0",
    "@types/jest": "^29.5.1",
    "@types/node": "18.15.11",
    "@types/react": "18.0.33",
    "@types/react-big-calendar": "^1.6.4",
    "@types/react-dom": "18.0.11",
    "@uppy/core": "^3.5.0",
    "@uppy/drag-drop": "^3.0.3",
    "@uppy/file-input": "^3.0.3",
    "@uppy/progress-bar": "^3.0.3",
    "@uppy/react": "^3.1.3",
    "@uppy/tus": "^3.2.0",
    "@uppy/webcam": "^3.3.2",
    "@vercel/analytics": "^1.0.1",
    "autosuggest-highlight": "^3.3.4",
    "axios": "^1.3.5",
    "dotenv-cli": "^7.2.1",
    "encoding": "^0.1.13",
    "eslint": "8.37.0",
    "eslint-config-next": "^13.2.4",
    "google-auth-library": "^9.0.0",
    "googleapis": "^126.0.1",
    "jest-mock-extended": "^3.0.4",
    "moment": "^2.29.4",
    "next": "^13.4.13",
    "nodemailer": "^6.9.3",
    "pusher": "^5.1.3",
    "pusher-js": "^8.3.0",
    "react": "^18.2.0",
    "react-big-calendar": "^1.8.2",
    "react-colorful": "^5.6.1",
    "react-dom": "^18.2.0",
    "react-email": "^1.9.3-canary.0",
    "react-hook-form": "^7.43.9",
    "react-quill": "^2.0.0",
    "react-toastify": "^9.1.2",
    "sharp": "^0.32.5",
    "stripe": "^12.14.0",
    "typescript": "5.0.3",
    "uuidv4": "^6.2.13",
    "yup": "^1.1.1"
},
```

Expected behavior

I should see the Uppy component

Actual behavior

I got this error :

not-found-boundary.js:22 Uncaught Error: Already found a plugin named 'react:Dashboard'. Tried to use: 'react:Dashboard'. Uppy plugins must have unique id options. See https://uppy.io/docs/plugins/#id.

[Murderlon]

Hi, this may not be a bug but you are likely trying to render multiple Uppy UI components with only one instance.

If that's the case, checkout this: https://uppy.io/docs/react/#how-do-i-render-x-amount-of-uppy-ui-components