cool.tsx

import React from 'react';

export type Breakpoints = {
  [key: string]: number;
};

export type MediaQueries<BP extends Breakpoints, T> = {
  [key in keyof BP]: T;
};

export interface BoxProps<BP extends Breakpoints>
  extends React.ComponentPropsWithRef<'div'> {
  mediaQueries: MediaQueries<BP, string>;
}

type MyBreakpoints = {
  smol: 0;
  mid: 500;
  largish: 1000;
};

export const Box: React.FC<BoxProps<MyBreakpoints>> = (props) => {
  const { mediaQueries } = props;
  // ✅
  const { smol, mid, largish } = mediaQueries;
  return <div />;
};