How to correctly copy the interface and transfer functions, events in TypeScript?

Question

JavaScript

Hello! I'm learning TypeScript and I can't seem to solve two problems. I will post the code of three React components at once, so that you can better see what the question is.

There is one component. It draws data and has two mouse events. I pass all this to the next component, from where I pass it already to App. There is a state with data and functions that are executed when the event occurs.

1 question - in 1 component ( InfoMain ) on the onMouseEnter event I call the handleChangeInfoMain function. It is registered in App and it is indicated there that the only parameter can be any. When I call it in InfoMain and pass the argument TS2304 error: Cannot find name 'design'. Is it really necessary that this design be something? Couldn't it just be an argument in the form of this value without having to make a constant somewhere with the design value?
2nd question - in 2nd component I had to re-duplicate the interface with values ​​for props. This interface is identical to that in component 1. How can I correctly import an interface from 1 component to 2 so that everything works correctly? So far, I haven't been able to do it.

Thank you all in advance for your help! The code for the 3 components is below.
1 component

export interface InfoMainProps {
  infoMainValue: {
    title: string,
    subtitle: string,
    img: {
      imgSrc: string,
      imgName: string,
    }

  },
  handleChangeInfoMain: MouseEventHandler<HTMLImageElement>,
  infoMainSetTimeout: MouseEventHandler<HTMLImageElement>,
}

export const InfoMain: FC<InfoMainProps> = ({ infoMainValue, handleChangeInfoMain, infoMainSetTimeout }) => (
  <section className="info-main">
    <div className="container info-main__bootstrap-container">
      <div className="row info-main__container">
        <div className="col-4 info-main__content-container">
          <div className="info-main__text-container">
            <h2 className="info-main__title">{infoMainValue.title}</h2>
            <p className="info-main__subtitle">{infoMainValue.subtitle}</p>
          </div>
          <div className="info-main__logo-container">
            <img
              onMouseEnter={() => { handleChangeInfoMain(design); }}
              onMouseLeave={infoMainSetTimeout}
              className="info-main__logo"
              src={infoMainValue.img.imgName === 'design' ? designActive : designNoActive}
              alt="logo"
            />
            <img
              onMouseEnter={() => { handleChangeInfoMain(development); }}
              onMouseLeave={infoMainSetTimeout}
              className="info-main__logo"
              src={infoMainValue.img.imgName === 'development' ? developmentActive : developmentNoActive}
              alt="logo"
            />
            <img
              onMouseEnter={() => { handleChangeInfoMain(promotion); }}
              onMouseLeave={infoMainSetTimeout}
              className="info-main__logo"
              src={infoMainValue.img.imgName === 'promotion' ? promotionActive : promotionNoActive}
              alt="logo"
            />
          </div>
        </div>
        <img className="col-5 info-main__image" src={infoMainValue.img.imgSrc} alt="icon" />
      </div>
    </div>
  </section>
);

2 component.

interface MainProps {
  infoMainValue: {
    title: string,
    subtitle: string,
    img: {
      imgSrc: string,
      imgName: string,
    }

  },
  handleChangeInfoMain: MouseEventHandler<HTMLImageElement>,
  infoMainSetTimeout: MouseEventHandler<HTMLImageElement>,

}
const Main: FC<MainProps> = ({ infoMainValue, handleChangeInfoMain, infoMainSetTimeout }) => (
  <>
    <InfoMain
      infoMainValue={infoMainValue}
      handleChangeInfoMain={handleChangeInfoMain}
      infoMainSetTimeout={infoMainSetTimeout}
    />
    <ProjectsMain />
    <Reviews />

  </>

);
export default Main;

And 3 component App

import {
  defaultObj, designObj, developmentObj, promotionObj,
} from '../../utils/constants';

const App: React.FC = (): ReactElement => {
  const [infoMainValue, setInfoMainValue] = useState(defaultObj);

  const infoMainPutDefault = (): void => {
    setInfoMainValue(defaultObj);
  };
  const infoMainSetTimeout = (): void => {
    setTimeout(infoMainPutDefault, 3000);
  };

  const handleChangeInfoMain = (value : any): void => {
    console.log(value);
  };

  return (
    <div className="page">
      <BrowserRouter>
        <Header />
        <Switch>
          <Route
            exact
            path="/"
          >
            <Main
              infoMainValue={infoMainValue}
              handleChangeInfoMain={handleChangeInfoMain}
              infoMainSetTimeout={infoMainSetTimeout}
            />
          </Route>

        </Switch>
        <Footer />
      </BrowserRouter>
    </div>
  );
};

export default App;

Answer 1

1. Your design variable is not declared anywhere, where should it come from? It will be similar with other variables: designActive, designNoActive, development, developmentActive, developmentNoActive, promotion, promotionActive, promotionNoActive
2. What prevents you from just doing an import?