How to export an array from a functional component in react?

Question

I'm trying to learn all the functionalities of react-redux and redux tool kit and in doing so I'm trying to create this demo project. Where data is being shared between sibling components and they work upon that data and return some data.

What I want to do is have something like this, where there will be a size slider and generate array button. Either changing the size or clicking on "Generate New Array" button should generate an array with respective size.

Note: I currently didn't animate the array, but whatever array will be generated will be shown in a purple container.

Here is my code for generating an array:

import { useSelector } from "react-redux";

const randomFromInterval = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

function GenerateArray() {
  const size = useSelector((state) => state.array.size); //array slider reducer is fully functional and returns the size
  let ary = [];
  for (let i = 0; i < size; i++) {
    ary[i] = randomFromInterval(5, 205);
  }
  console.log(ary);
  return ary;
}

export default GenerateArray;

And here is my reducer function and action creator object using rtk:

import { createSlice } from "@reduxjs/toolkit";

import GenerateArray from "../../methods/GenerateArray";

const initialState = {
  array: [],
};

const generateArraySlice = createSlice({
  name: "generateArray",
  initialState,
  reducers: {
    clicked: (state) => {
      state.array = GenerateArray();
      console.log(state.array); //Trying to console log current state to check whether I am recieving an array.
    },
  },
});

export default generateArraySlice.reducer;
export const { clicked } = generateArraySlice.actions;

And finally the action was dispatched by clicking the button "Generate New Array" (although unnecessary I think, I'm including it):

import { useDispatch } from "react-redux";

import { changed } from "./arrayinputSlice";
import { clicked } from "../generateArray/generateArraySlice";

function ArrayView() {
  const dispatch = useDispatch();

  return (
    <div className="array-view">
      <div className="array-main"></div>
      <div className="array-input">
        <input
          type="range"
          max="10"
          min="3"
          onChange={(e) => dispatch(changed(e.target.value))}
        />
        <button onClick={() => dispatch(clicked())}>Generate New Array</button>
      </div>
    </div>
  );
}

export default ArrayView;

And lastly the error, all of this throws this error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I don't fully understand hooks but I think I've called them inside the function body. As well I think you kinda don't export and import array such way.

Please point me out where I'm wrong. It will be a good learning expierience.

Thank You