How do I organize React components internally

organized-component.tsx

function MyComponent(props) {
  // refs
  const $item = React.useRef();
  // states
  const [value, setValue] = React.useState("");
  // computed
  const filtered = React.useMemo(
    () => props.list.filter((item) => item.includes(value)),
    [props.list, value]
  );
  // queries
  const { data } = useCurrentUser();
  // mutations
  const [mutateList, { status }] = useMutateList();
  // callback
  const handleChange = React.useCallback(
    function handleChange(event) {
      setValue(event.target.value);
    },
    [setValue]
  );
  // effects
  React.useEffect(() => {
    analytics.track({ filter: value, results: filtered });
  }, [value, filtered]);
  // render
  if (filtered.length === 0) return <EmptyUI />;
  return <ListUI list={filtered} />;
}