Utils.js with latest Javascript ES6 syntax

Create the Utils.js file like this with multiple functions, etc

const someCommonValues = ['common', 'values'];
    
export const doSomethingWithInput = (theInput) => {
   //Do something with the input
   return theInput;
};
    
export const justAnAlert = () => {
   alert('hello');
};

Then in your components that you want to use the util functions, import the specific functions that are needed. You don't have to import everything

import {doSomethingWithInput, justAnAlert} from './path/to/Utils.js'

And then use these functions within the component like this:

justAnAlert();
<p>{doSomethingWithInput('hello')}</p>

Hooks are another way to go.

With custom hooks you can reuse your state dependent handlers with ease between components.

// hooks.js
const { useState } from 'react';

const useHandleChange = () => {
  const [formValues, setFormValues] = useState({});

  const handleChange = (e) => {
    let { type, checked, name, value} = e.target;
    value = type === 'checkbox' ? checked : value;

    setFormValues({
      [name]: value
    });
  };

  return { formValues, handleChange };
}

// Component.js
import useHandleChange from './hooks';

const LoginForm = () => {
  // you can use that on each component that needs the handleChange function
  const { formValues, handleChange } = useHandleChange();

  return (
    // html template
  );
};

You would need to convert your component to function component, though so I would propose this solution only if it doesn't require too much effort to refactor your code. Hooks does not work on class components.

Why not create a custom hook with as much shared logic as possible that returns all of your data and needed methods?

For example:

/* color.jsx */

export function useColor() {

  // Our shared state:
  const [state, setState] = useState({
    color: 'No color picked yet',
  });

  // Our methods:
  const changeColorToRed = () => {
    setState({
      color: 'red',
    });
  };

  const changeColorToGreen = () => {
    setState({
      color: 'green',
    });
  };

  const changeColorToBlue = () => {
    setState({
      color: 'blue',
    });
  };

  return {
    state,
    changeColorToRed,
    changeColorToGreen,
    changeColorToBlue,
  }
}

So basically, we'll have this shared hook containing a shared state and methods,
and we'll return everything we want to use in the relevant comps.

For example:

/* FooColor.jsx */

const FooColor = () => {
  const { state, changeColorToRed, changeColorToGreen, changeColorToBlue } = useColor();

  return (
    <div>
      <div style={{ fontSize: 30 }}>Foo</div>
      Foo Color: {state.color}
      <br />
      <button onClick={changeColorToRed}>Change foo color to red</button>
      <button onClick={changeColorToGreen}>Change foo color to green</button>
      <button onClick={changeColorToBlue}>Change foo color to blue</button>
    </div>
  );
};

Then you can import and use it in the exact same way in BarColor.

In this example we get a clean result without the need for useRef or even props of any kind in this case.

For more info, you can check out the documentation about custom hooks.

Also, the use-case here is a little vague so I hope that I understood your needs correctly.
Let me know if you need some more help with this.

Update:

If we need 2 separate states for each component color,
we can simply manage separate states in the shared hook.

Example:

  // Either like this:
  const [fooColor, setFooColor] = useState('No color picked yet');
  const [barColor, setBarColor] = useState('No color picked yet');

  // Or like this (my personal preference):
  const [state, setState] = useState({
    fooColor: 'No color picked yet',
    barColor: 'No color picked yet',
  });

  // Then we can add a parameter in order to avoid function duplication:
  const changeColorToRed = (comp) => {
    switch (comp) {
      case 'foo':
        setState({
          // Spread the existing contents of the state (`barColor` in this case):
          ...state,
          fooColor: 'red',
        });

      case 'bar':
        setState({
          ...state,
          barColor: 'red',
        });

      default:
        console.error('Non-existent comp passed');
    }
  };

Maybe there's another option I'm missing? But so far I've been doing a lot of 1 & 3.

Following the 1st option you will end up with circular dependency since you will have to import the child component and from the child component you will have to import the function from parent. However if it's about passing it as props, it's still problematic since you will have to memoize it in case if you don't want any excessive re-renders.

Personally I'd go with the 3rd option, but only if you are going to use the mentioned function inside MainComponent. If you'd decide to use it also somewhere else, would be best to create a separate directory in the main root, e.g. utils with dateUtils.ts file to store all of the helper functions related with Date.