В ошибке сказано , что вы должно использовать useState только в функции

import React, { useState } from "react";

const MemoID = ({ getID }) => {
  return Array.from(new Array(getID)).map((_, i) => {
    return <p key={i}> {i} </p>;
  });
};

export default function App() {
  let [getID, setID] = useState(0);
  return (
    <>
      <MemoID key={getID} {...{ getID }} />
      <button onClick={() => setID(getID + 1)}> clickMe </button>
    </>
  );
}

https://codesandbox.io/s/jolly-fermi-lioe7?file=/s...

Для этого есть полноценный API для Youtube Iframe. Вот ссылка:
https://developers.google.com/youtube/iframe_api_r...

вот пример на ванильном js . Надеюсь , что я вам помог

Я могу скинуть вам полноценную настройку webpack , чтобы вы долго не мучились и смогли быстро начать свою разрабутку приложения
/**** package.json ****/
В свойстве devDependencies находятся список установленных пакетов .

npm i -D yourPack

{
  "name": "yourProject",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack serve --mode production",
    "watch": "webpack serve --mode development --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.5",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "node-sass": "^6.0.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.7",
    "vue-loader-plugin": "^1.3.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

/**** webpack.config.js ****/

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');

module.exports = {
    mode:'development',
    devtool: false,
    performance: {
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    },
    entry: ["./src/index.js","./src/assets/js/main.js"],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),

    },
    plugins: [
        new HTMLWebpackPlugin({template: "./src/index.html"}),
        new VueLoaderPlugin(),
    ],
    resolve: {
        extensions:['.js','.scss','.vue', '.svg', '.png', '.jpg','...'],
        alias: {
            vue: 'vue/dist/vue.js'
        },
    },
    module: {
        rules: [
            {
                test:/\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.scss$/,
                use: ['vue-style-loader','style-loader','css-loader','sass-loader'],
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [{
                    loader:'url-loader',
                    options: {
                        name: '[name].[ext]',
                        outPath: './src/assets/imgs',
                        publicPath: './src/assets/imgs',
                        emitFile: true,
                        esModule: false,
                    }
                }]
            },
            {
                test: /\.(ttf|woff|woff2|eot)/,
                use: ['file-loader'],
            },
        ]
    }
}