Update to use maps instead of stringifying json for values

Update nav to use maps for keys instead of stringifying json.

@spmonahan did me a solid by coding out a great tutorial/example.

https://github.com/microsoft/fluentui/pull/29867#discussion_r1409940094

https://www.typescriptlang.org/play?#code/C4TwDgpgBAsiDCB7AtmANhAHgaQiKAvFAN4BQUUAbgIZoCuEAXFAHZ3IBGEATgNzlRQkAPzMAzsG4BLFgHN+AX1KkA9CqgAlCAGNE3ACZQpYqACs6EqNRZQA8h1M7gUMYiPAA5CYDWeE9W5oQLRqYClKCDR8QIlpbWAIfVIhaDgtXQNCTR09fQAeOCRUDBw8ABpWdi5uAD5+VXUYajAobWsoC2hrfBo0KUMAKQBlKEQHJyt-KF8QZPBUkCaWoiWChBR0LFwQCrZOHjrlFNgQLWp4gAVuRDATIjIKXoZmQo2S7cVlXRZLNIhz4BFMCIFgQFjOIgACjA11uL1O-0usLEAEpmJREP1CDUSAI1FAAOrQNo2CARGwyABmPEEAAtoMcpJSoAB3aAs6zAATfSzIEAASXBPBYtAAKrSZLIXs08ilEMyYTcxAA6J4QXZVA5ZUEs2DNSEo-gUPmChLcEVocWS5ViCDAaHI1W0BgVACMhtISgaUAAgixDFJnLaIMgTAADOgsbwsRAslhh1l6bwmRDeaj4FmB2l6lrARCIACEc0gJwAqlGY3GlllVpHo7GWBr9rV+DznHXKywlvDy-Wq81tRBdUsDfwOw2lja7ZDXRUAEwe8f9sDK2TT938IA

type MyComplexKey = {
  value: number;
  type?: string;
}

// Record is just an Object so it's keys are relatively restricted
type MyRecord = Record<MyComplexKey, number>;

// Map can use any valid JS object as a key
type MyMap = Map<MyComplexKey, number>;

type MyReactProps = {
  value: MyComplexKey;
}

const MyReactComponent = (props: MyReactProps): void => {
  // We can even infer the type if we want
  const myInternalThing: Map<typeof props.value, number> = new Map();
  myInternalThing.set(props.value, 1);
}

// And it seems `unknown` works okay with Map too!
type MyUnknownMap = Map<unknown, number>;
const unknownMap: MyUnknownMap = new Map();
unknownMap.set(1, 2);
unknownMap.get(1);