Какие три лучше способы есть чтобы уменьшить код в react?

У меня есть вот такой код

import React,{useState,useEffect} from "react";
import ReactDOM from "react-dom";

function App() {
  const [listImg, setLis] = useState([]);
  const [Indx, setIndx] = useState(0);
  const [resErrX, setErrorX] = useState("");

  useEffect(() => {
    (async () => {
      try {
        const Res = await fetch(......);
        const Product = await Res.json();
        setLis(
          Product.x
            .map((value, index) => ({
              key: `${value}`,
              z:`${index}`,
              y: `${value}`,
              onClick: () => {
                setIndx(index);
              }
            }))
        );
      } catch (error) {
          setErrorX(error.message);
      }
    })();
  }, []);

  return (
    <div className="App">
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Как сделать так чтобы вот эта часть кода.
App.js

({
              key: `${value}`,
              z:`${index}`,
              y: `${value}`,
              onClick: () => {
                setIndx(index);
              })

было написано в файле DD.js;

const DDX = {
              key: `${value}`,
              z:`${index}`,
              y: `${value}`,
              onClick: () => {
                setIndx(index);
              };

потом чтобы импортировать в файл App.js .
но я получаю Error setIndx(index) что не существует,

можете показать три способа написание кода Чтобы это часть кода было написано в файле DDX.js потом чтобы использовать в App.js.
если вы знаете другие способы уменьшить код можете показать ваши варианты.